2023-11-10 10:02:13

边距和填充的区别?

在CSS中,边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?


当前回答

Margin是CSS中的一个属性,用于在元素周围、边框之外创建空格。程序员可以设置上、右、下和左的边距。换句话说,他可以使用margin-top, margin-right, margin-bottom和margin-left来设置这些值。

Margin值可以是以下类型。

首先,auto允许浏览器计算保证金。此外,length表示以px、pt或cm为单位的边距,而%则有助于将边距描述为相对于包含元素宽度的百分比。最后,inherit表示边缘必须从父元素继承。

Padding是CSS中的一个属性,用于帮助在边框内的元素周围创建空间。程序员可以设置上、右、下和左的填充。换句话说,他可以使用padding-top、padding-right、padding-bottom和padding-left来设置这些值。

填充值可以是以下类型。

length以px, pt或cm为单位描述填充,而%则以相对于包含元素宽度的百分比表示填充。最后,inherit表示填充应该继承自父元素。

div.special { width:200px; border-style: solid; border-width:thin; border-color:#000; margin:30px 20px 10px 25px; } div.special2 { width:200px; border-style: solid; border-width:thin; border-color:#000; padding:30px 20px 10px 25px; } <div class="special"> Hello its margin test </div> <div class="special2"> Hello its padding test </div>

边距和填充之间的区别

Margin是一个CSS属性,用于在已定义边框外的元素周围创建空间,而padding是一个CSS属性,用于在已定义边框内的元素周围创建空间。因此,这解释了边距和填充之间的主要区别。

值 此外,margin的值可以是auto、length、%或inherit,而padding的值可以是length、%或inherit type。因此,这是边距和填充之间的另一个区别。

简而言之,边距和填充是CSS中的两个属性,允许对网页进行样式化。不可能为这些属性赋负值。边距和填充之间的主要区别在于边距有助于在边框外的元素周围创建空间,而填充有助于在边框内的元素周围创建空间。

其他回答

最简单的定义是; Padding是容器元素边界内的一个空格,margin是容器元素边界外的一个空格。 对于不是容器的元素,填充可能没有多大意义,但空白可以帮助排列它。

这里的答案中漏掉了一个关键的东西:

上下页边距是可折叠的。

所以如果你在一个元素的底部有一个20px的边距,在下一个元素的顶部有一个30px的边距,两个元素之间的边距将是30px而不是50px。这不适用于左/右边距或填充。

我刚刚注意到一件事,但上面的答案都没有提到。如果我有一个动态创建的DOM元素,它是用空的内部html内容初始化的,如果你不希望这个空元素占用任何空间,除了它的内容被创建之外,使用边框而不是填充是一个很好的实践。

了解边距和填充之间的区别是很好的。据我所知:

Margin is the outer space of an element, while padding is the inner space of an element. In other words, margin is the space outside of an element's border, while padding is the space inside of its border. You can set auto value to margin. However, it's not allowed for padding. See this. Note: Use margin: auto to center a block element inside its parent horizontally. Also, it's possible to center an element inside a flexbox vertically or horizontally or both, by setting margin to auto. See this. Margin can be any float number, but padding must not be negative. When you style an element, padding will be styled also; but not margin. Margin gets the parent element's style. For example, when you set the background-color property to black, its inner space (i.e. padding) will be black, but not its outer space (i.e. margin).

Margin是CSS中的一个属性,用于在元素周围、边框之外创建空格。程序员可以设置上、右、下和左的边距。换句话说,他可以使用margin-top, margin-right, margin-bottom和margin-left来设置这些值。

Margin值可以是以下类型。

首先,auto允许浏览器计算保证金。此外,length表示以px、pt或cm为单位的边距,而%则有助于将边距描述为相对于包含元素宽度的百分比。最后,inherit表示边缘必须从父元素继承。

Padding是CSS中的一个属性,用于帮助在边框内的元素周围创建空间。程序员可以设置上、右、下和左的填充。换句话说,他可以使用padding-top、padding-right、padding-bottom和padding-left来设置这些值。

填充值可以是以下类型。

length以px, pt或cm为单位描述填充,而%则以相对于包含元素宽度的百分比表示填充。最后,inherit表示填充应该继承自父元素。

div.special { width:200px; border-style: solid; border-width:thin; border-color:#000; margin:30px 20px 10px 25px; } div.special2 { width:200px; border-style: solid; border-width:thin; border-color:#000; padding:30px 20px 10px 25px; } <div class="special"> Hello its margin test </div> <div class="special2"> Hello its padding test </div>

边距和填充之间的区别

Margin是一个CSS属性,用于在已定义边框外的元素周围创建空间,而padding是一个CSS属性,用于在已定义边框内的元素周围创建空间。因此,这解释了边距和填充之间的主要区别。

值 此外,margin的值可以是auto、length、%或inherit,而padding的值可以是length、%或inherit type。因此,这是边距和填充之间的另一个区别。

简而言之,边距和填充是CSS中的两个属性,允许对网页进行样式化。不可能为这些属性赋负值。边距和填充之间的主要区别在于边距有助于在边框外的元素周围创建空间,而填充有助于在边框内的元素周围创建空间。