CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
TL;DR:默认情况下,我在任何地方都使用边距,除非我有边框或背景,并且希望增加可见框内的空间。
对我来说,填充和边距之间的最大区别是垂直边距会自动折叠,而填充不会。
考虑两个元素,一个在另一个之上,每个元素的填充为1米。此填充被视为元素的一部分,并始终保留。
因此,您将以第一个元素的内容结尾,然后是第一个元素填充,然后是第二个元素的填充,最后是第二元素的内容。
因此,这两种元素的含量最终将相距2米。
现在用1毫米的边距替换填充。边距被认为在元素之外,相邻项目的边距将重叠。
因此,在本例中,您将得到第一个元素的内容,然后是1em的组合边距,然后是第二个元素的属性。因此,这两种元素的含量仅相差1米。
当你知道你想说一个元素周围有1em的间距,而不管它旁边是什么元素时,这会非常有用。
另外两个大的区别是,填充包括在点击区域和背景色/图像中,但不包括边距。
div.box>div{height:50px;width:50px,border:1px纯黑;text-align:center;}div.padding>div{padding-top:20px;}div.margin>div{margin-top:20px;}<h3>默认值</h3><div class=“box”><div>A</div><div>B</div><div>C</div></div><h3>顶部填充:20px</h3><div class=“box padding”><div>A</div><div>B</div><div>C</div></div><h3>页边空白:20px</h3><div class=“box margin”><div>A</div><div>B</div><div>C</div></div>
其他回答
TL;DR:默认情况下,我在任何地方都使用边距,除非我有边框或背景,并且希望增加可见框内的空间。
对我来说,填充和边距之间的最大区别是垂直边距会自动折叠,而填充不会。
考虑两个元素,一个在另一个之上,每个元素的填充为1米。此填充被视为元素的一部分,并始终保留。
因此,您将以第一个元素的内容结尾,然后是第一个元素填充,然后是第二个元素的填充,最后是第二元素的内容。
因此,这两种元素的含量最终将相距2米。
现在用1毫米的边距替换填充。边距被认为在元素之外,相邻项目的边距将重叠。
因此,在本例中,您将得到第一个元素的内容,然后是1em的组合边距,然后是第二个元素的属性。因此,这两种元素的含量仅相差1米。
当你知道你想说一个元素周围有1em的间距,而不管它旁边是什么元素时,这会非常有用。
另外两个大的区别是,填充包括在点击区域和背景色/图像中,但不包括边距。
div.box>div{height:50px;width:50px,border:1px纯黑;text-align:center;}div.padding>div{padding-top:20px;}div.margin>div{margin-top:20px;}<h3>默认值</h3><div class=“box”><div>A</div><div>B</div><div>C</div></div><h3>顶部填充:20px</h3><div class=“box padding”><div>A</div><div>B</div><div>C</div></div><h3>页边空白:20px</h3><div class=“box margin”><div>A</div><div>B</div><div>C</div></div>
我总是使用这个原则:
这是Firefox中inspect元素特性的方框模型。它像洋葱一样工作:
你的内容在在中间。填充是指内容和标签边缘之间的空间在…内边界及其规格边距是标记周围的空格。
因此,更大的边距将在包含内容的框周围腾出更多空间。
较大的填充将增加内容和其所在的框之间的空间。
如果将框设置为特定值,则它们都不会增加或减小框的大小。
保证金与衬垫:
元素中使用边距来创建该元素和页面其他元素之间的距离。其中填充用于在元素的内容和边框之间创建距离。边距不是元素的一部分,而填充是元素的一。
请参阅下面从边距与填充-CSS财产中提取的图像
了解边距和填充之间的区别很好。以下是一些区别:
边距是元素的外部空间,而填充是元素的内部空间。边距是元素边界外的空间,而填充是元素边界内的空间。Margin接受auto:bmargin:auto的值,但不能将padding设置为auto。提示:您可以使用此技巧使元素在其父对象内部居中(甚至垂直)。例如,请参见我的另一个答案。边距可以设置为任何数字,但填充必须为非负数。设置元素样式时,填充也会受到影响(例如背景色),但不会影响边距。
对你的问题有更多的技术解释,但如果你想要一种方法来思考边距和填充,这个类比可能会有所帮助。
将块元素想象成挂在墙上的相框:
照片就是内容。垫子是衬垫。边框是边框。墙就是视口。两帧之间的间距是边距。
考虑到这一点,一个很好的经验法则是,当您希望将一个元素与墙上的其他元素隔开时,使用边距,当您调整元素本身的外观时,使用填充。边距不会改变元素的大小,但填充会使元素变大1。
1可以使用框大小属性更改此行为。