填充属性不添加间距答案

【问题标题】：Padding property doesn't add spacing填充属性不添加间距
【发布时间】：2014-06-23 20:39:17
【问题描述】：

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

我有一段

<p>Some text</p>

还有一些样式

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

结果 (JSFiddle)

然后我将padding: 49px 添加到CSS。从逻辑上讲，我应该得到类似的东西
但最后我得到了它 (JSFiddle)

如我们所见，文本移动了，但没有添加红色间距。为什么？

PS : 也许我表达得不好，对此我很抱歉

【问题讨论】：

删除margin-left?您的期望是错误的，您的第一张图片已经显示红色块已向右移动。使用填充它不会神奇地回到左边。
"..从逻辑上讲，我应该得到类似的东西.."：那么最好删除padding-left。
你有margin left和padding left，空白是margin，文本前的多余空间是padding。假设您只添加了填充。如果您实际上添加了padding: 49px，那么您的图像不会显示它。你到底想达到什么目的？
@Huangism，我的 CSS 中忘记了 margin-left 属性 ^^

标签： html css padding

【解决方案1】：

您有一个margin-left。 Difference between Margins and Paddings.

删除它：

CSS

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

In this fiddle

没有更多的空间:)

【讨论】：

【解决方案2】：

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

如果你不希望背景被绘制到填充区域，你可以设置：

background-clip: content-box;

但是我认为它只适用于 IE9 及更高版本，所以如果你需要支持 IE8，那么你不能使用它。

【讨论】：

【解决方案3】：

你得到的结果是正确的。

边距 - 在框外增加空间

边框 - 在框周围添加边框

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

在 google 上查找“css box model”以获取更多信息。

【讨论】：

【解决方案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>

【讨论】：