在CSS中,边距和填充到底有什么区别?它似乎真的没有多大用处。你能给我举个例子说明区别在哪里(以及为什么知道区别很重要)吗?
当前回答
填充
Padding是一个CSS属性,用于定义元素内容与其边框(如果有边框的话)之间的空间。如果元素周围有边框,则填充将从该边框到出现在该边框中的元素内容之间留出空间。如果元素周围没有边框,那么添加填充对该元素没有任何影响,因为没有边框可以提供空格。
保证金
Margin是一个CSS属性,用于定义元素外部到下一个外部元素的间距。
边距影响有或没有边界的元素。如果一个元素有边框,则margin定义了从这个边框到下一个外部元素的空间。如果元素没有边框,则margin定义从元素内容到下一个外部元素之间的空间。
Padding和Margin的区别
所以边距和填充的区别在于填充处理内部空间,而边距处理下一个外部元素的外部空间。
其他回答
Padding是内容和边框之间的空间,而margin是边框之外的空间。这是我从谷歌快速搜索中找到的一张图片,它说明了这个想法。
记住这三点:
边距是控件周围的额外空间。 填充是控件内部的额外空间。 外部控件的Padding是内部控件的Margin。
演示图片:(红框为欲望控制)
边距是框外的空间;填充物是盒子内部的空间。用白色填充很难看出区别,但用彩色填充可以很好地看到。
你可以看看这个链接,在那里你可以看到在CSS中padding和margin是如何工作的。 https://raw.githack.com/sushantbramhacharya/WebTechnology_LEC/main/margin/index.html
填充允许开发人员保持文本和它的封闭元素之间的空间。边距是元素与父DOM中的另一个元素共同维护的空间。
看到的例子:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
<title>Pseudo Elements</title>
<style type="text/css">
body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
.page
{
background-color: #fff;
padding: 10px 30px 50px 50px;
margin:30px 100px 30px 300px;
}
</style>
</head>
<body>
<div class="page">
Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text.
</div>
</body>