2023-11-10 10:02:13

边距和填充的区别?

在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>