2

次のようなマークアップがあるとします。

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

パディングのテスト目的で、「コンテナ」が何百もの a で満たされていると想像してください。

今、私がやりたいのは、「コンテナ」の端とそのコンテンツの左側と右側の間に空白の領域を作成することです。だから私は追加します：

padding-left: 50px;
padding-right: 50px;

今、私が理解した (考えた) ことから、これは、以前は 1 行あたり 100 個の a が収まっていた場合、現在は 80 個ほどしか収まらないことを意味します。つまり、「コンテナ」は同じ幅のままですが、下方向に大きくなります。

しかし、私が見ているのは、「コンテナ」のサイズが縦ではなく横に大きくなっているということです。

「コンテナ」を垂直方向に成長させ、水平方向に同じ幅に保つにはどうすればよいですか?

4

4 に答える 4

6

幅を 800px に変更してから、パディングを追加する必要があります。パディングは幅に加算されます。

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

ボックスモデルはCan Berk Güder 提供

于 2009-04-02T08:51:40.173 に答える
2

ギャリーが言ったこと、Chrome または Firefox 用の Firebug プラグインを使用している場合は、右クリックして「要素を検査」し、要素のサイズがどのように変化しているかを視覚的に表示できます。これらの状況では本当に役立ちます。

于 2009-04-02T08:58:10.797 に答える
0

要素にパディングまたはマージンを追加することの影響は、ページを表示しているブラウザーに完全に依存します。Garry が言うように、パディングとマージンは追加する必要がありますが、IE6 には当てはまらないため、ブラウザーについて調査する必要があります。違いと、スタイル ルールにどのように対応できるかを説明します。

あなたのやっているように見えることから、ページ全体にパディングを適用したいだけです。CSS で body を直接参照することで、これを行うことができます。だからあなたは-

body
{
    padding:0 50 0 50;
}
于 2009-04-02T08:58:42.433 に答える
-1

div 内の任意のものにマージンを追加することもできます。

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
于 2009-04-02T08:57:33.263 に答える