Question

我recently realised填充属性会在内容和此内容的边框之间添加间距。当我发现一个填充不添加间距的实例时，我正在测试这个属性。

我有一个段落

<p>Some text</p>

和一些造型

p {
    background: red;
    color: white;
    border: dashed 2px blue;
    margin-left: 44px   
}

结果（JSFiddle）

enter image description here
然后我将padding: 49px添加到CSS。从逻辑上讲，我应该得到类似的内容
但最后我得到了它（JSFiddle）

我们可以看到，文本会移动，但不会添加红色间距。为什么呢？

PS：也许我表达的很糟糕，我很抱歉

Answer 1

你有margin-left。 Difference between Margins and Paddings.

删除它：

CSS

p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}

In this fiddle

没有更多空间：）

Answer 2

红色是background-color，默认情况下也会在padding区域绘制，而不是margin。你看到的行为是正确的。

如果您不想将背景绘制到填充区域，可以设置：

background-clip: content-box;

但是我认为只适用于IE9及以上，所以如果你需要支持IE8，那么就无法使用它。

Answer 3

你得到的结果是正确的。

保证金 - 增加盒子外面的空间

边框 - 在包装盒周围添加边框

填充 - 在内容和边框之间添加空格

查找＆＃34; css box model＆＃34;在谷歌上更多。

ķ

Answer 4

我不明白你想做什么，但我想你想要这个

<html>
<head>
    <style>
    p 
    {
        background: red;
        color: white;
        border: dashed 2px blue;
        /* display: inline-block; */
        padding-left: 49px

    }

</style>
</head>
<body>
<p>Some text</p>
</body>
</html>

填充属性不会添加间距

4 个答案: