CSSパディング - どうやら私は

が、私はこのようないくつかのマークアップを考えてみましょう何かを逃した：CSSパディング - どうやら私は

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

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

「コンテナ」はパディングのテスト目的のための数百人で満たされている想像してみてください。

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

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

今すぐI（思考）私が理解したものから、これが100あれば前に、わずか80かそこら今収まるように行ごとに取り付けられていますことを意味します。換言すれば、「容器」は同じ幅のままであるが、 を下向きにしてに成長する。

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

「コンテナ」を縦に伸ばし、横に同じ幅にするにはどうすればよいですか？

出典

2009-04-02 Tom

：http://www.w3.org/TR/CSS2/box.html –

良いリンクを誰かがかもしれませんが、私は私の答えにそれを追加しましたコメントをチェックしないでください。 –

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

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

Box modelあなたはまた、divの内部で何にも余裕を追加することができCan Berk Güder

出典

2009-04-02 08:51:40

これはこの方法ではうまく動作しませんでした。どのような明白な解決策。ありがとう！ – Tom

-1

の礼儀：

<style type="text/css">  
#container  
{  
    margin: 0 auto;  
    width: 900px;  
    background: green;  
} 
#container * 
{ 
    margin-left: 50px; 
    margin-right: 50px; 
} 
</style>

出典

2009-04-02 08:57:33 cjk

それは本当にうまくいかないでしょう、それについて考えてみてください。 –

ええ、それはdivのすべての人に余裕を追加するように少し危険です。 –

@Andrew Bullock：どうしてですか？ @Gryry Shutler：はい、それはすべてにマージンを追加しますが、1つだけOKを追加していることが分かっていると、OPはテキストの前に幅800のdivと50pxのギャップで考えることを考えたかったのです。 – cjk

youreのは、Firefox用のクロームやFirebugのプラグインを使用している場合は、右のできる、と述べた何ギャリー「要素を点検して」クリックして、要素がどのようにサイズ変更されているかを視覚的に見て、実際にこれらの状況に役立ちます。

出典

2009-04-02 08:58:10

要素に余白や余白を追加することによる影響は、ページを表示しているブラウザによって異なります。余白と余白は、Garryが言うように追加する必要があります。IE6ではそうではありませんブラウザの違いやスタイルルールにどのように対応できるかについてのいくつかの調査があります。

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

body 
{ 
    padding:0 50 0 50; 
}

出典

2009-04-02 08:58:42 Stimul8d

CSSパディング - どうやら私は

答えて

関連する問題