CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
CSS中的边距和填充有什么区别?在何种情况下:
两者都有效。只有保证金是合适的。只有填充是合适的。
当前回答
边缘
边距通常用于在元素本身及其周围之间创建空间。
例如,我在构建导航条时使用它,使其紧贴屏幕边缘,不会出现空白。
衬料
当我有一个元素在边框内时,我通常使用<div>或类似的东西,我想减小它的大小,但同时我想保持它周围其他元素之间的距离或边距。
简单地说,这是情境性的;这取决于你想做什么。
其他回答
这里有一些HTML演示了填充和边距如何影响可点击性和背景填充。一个对象会收到对其填充的点击,但对对象空白区域的点击会转到其父对象。
$(“.other”).click(函数(e){console.log(“外部”);e.停止传播();});$(“.intern”).click(函数(e){console.log(“内部”);e.停止传播();});.外部{填充:10px;背景:红色;}.内部{边距:10px;填充:10px;背景:蓝色;边框:纯白1px;}<script src=“http://code.jquery.com/jquery-latest.js“></script><div class=“outer”><div class=“inner”style=“位置:相对;高度:0px;宽度:0px”></div></div>
边距位于块元素的外侧,而填充位于内侧。
使用边距将块与块外的东西分开使用填充将内容移离块的边缘。
了解边距和填充之间的区别很好。以下是一些区别:
边距是元素的外部空间,而填充是元素的内部空间。边距是元素边界外的空间,而填充是元素边界内的空间。Margin接受auto:bmargin:auto的值,但不能将padding设置为auto。提示:您可以使用此技巧使元素在其父对象内部居中(甚至垂直)。例如,请参见我的另一个答案。边距可以设置为任何数字,但填充必须为非负数。设置元素样式时,填充也会受到影响(例如背景色),但不会影响边距。
边缘
边距通常用于在元素本身及其周围之间创建空间。
例如,我在构建导航条时使用它,使其紧贴屏幕边缘,不会出现空白。
衬料
当我有一个元素在边框内时,我通常使用<div>或类似的东西,我想减小它的大小,但同时我想保持它周围其他元素之间的距离或边距。
简单地说,这是情境性的;这取决于你想做什么。
边距在框外,填充在框内