Question

我对CSS很陌生。根据文档是围绕内容填充。在这个例子中是“礼物和特别优惠”的内容在这个简单的例子中，我将padding-right设置为150px，这应该意味着根据文档我应该在内容的右边有150px的空间。但是我的内容右侧没有150px的空白空间。我一定错过了一些融合理解的东西吗？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chapter 5: Indestructible Boxes</title>
    <style type="text/css" media="screen">
    h3
    {
        margin:50px;
        padding:0px 150px 0px 0px;
        border:1px solid black;
    }
   </style>
</head>
<body>
    <div style="width:200px; background:red;">
    <h3>Gifts and Special Offers</h3>
    </div>
</body>
</html>

//托尼

Answer 1

Padding是内部间距。

Margin是外部间距。

当您为h3提供以下样式时，实际上是从所有方向包裹50px外部间距，并在右侧添加150px内部间距。

margin: 50px;
padding: 0px 150px 0px 0px;

这使得50px + 150px + 50px = 250px的水平间距。

Resulted spacing

请注意，你的div只有200px宽，所以你在获得你所期待的东西时会遇到麻烦。

填充是在内容周围填充，但这不完全正确

1 个答案: