在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是边框外的空间。
Padding是网页上最接近的组件之间的空间,margin是网页边缘的空间。
边距和填充之间的一个关键区别在任何答案中都没有提到:点击性和悬停检测
增加填充会增加元素的有效大小。有时我有一个很小的图标,我不想让它看起来更大,但用户仍然需要与该图标进行交互。我增加了图标的填充,让点击和悬停的足迹更大。增加图标的边距不会有同样的效果。
关于这个主题的另一个问题的回答给出了一个例子。
最简单的定义是; Padding是容器元素边界内的一个空格,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中的两个属性,允许对网页进行样式化。不可能为这些属性赋负值。边距和填充之间的主要区别在于边距有助于在边框外的元素周围创建空间,而填充有助于在边框内的元素周围创建空间。