0

私はCSSにかなり慣れていません。ドキュメントによると、コンテンツの周りにパディングがあります。この例では、「Gifts and Special Offers」というコンテンツがあります。この単純な例では、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 に答える