0

我对 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>

//托尼

4

1 回答 1

3

填充是内部间距。

边距是外部间距。

当您提供h3以下样式时，您实际上将其包裹50px在各个方向的外部间距，以及150px右侧的额外内部间距。

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

这使得水平间距为50px + 150px + 50px = 250px.

结果间距

请注意，您的 div 仅是200px宽的，因此您将很难获得所期望的内容。

于 2013-08-24T14:50:45.280 回答