全体の幅を変更せずにパディングを追加する

Question

定義済みの幅の上に追加することなく、要素にパディングを追加するにはどうすればよいですか？

レイアウトのクリーンなグリッドを作るために、列の幅を定義することは良いことです。列内の内容にパディングを追加する場合もあります。それを指定する方法はありますか？

Answer 1

element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

Answer 2

使用ボックスサイジング、それはパディングが包括的になり： https://developer.mozilla.org/en-US/docs/CSS/box-sizing

例：

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; /* Firefox */ 
    -webkit-box-sizing:border-box; /* Safari */ 
} 

それは、これはIE7で動作しないことは注目に値します。

はIE8の場合、このQのトップの答えを参照してください。box-sizing: border-box => for IE8?

Answer 3

毎回あなたが要素、この要素の変化の幅をブロックするためにパディングを追加します。この問題には多くの解決策があります。私は通常、最初の子要素にmarginを設定し、この要素にはwidth: 100%を設定します。例えば

、我々が持っている：これらの要素のための

<div id="main"> 
    <div id="child"> 
     This is content with margin 
    </div> 
</div> 

CSSスタイルを：

#main { 
    border: solid 1px red; 
    float: left; 
    width: 5em; 
} 

#child { 
    border: solid 1px blue; 
    float: left; 
    width: 100%; 
    margin: 0.5em; 
} 

これは、それは私が知っている、古いスレッドの任意のブラウザ

Answer 4

のためのソリューションです。しかし、前回はDIVをNOTの幅とパディングで作成するための完全なブラックホールがあったので、3列の行とCSS2を爆破することはありません。だから、フロートを残したDIVを1つ置き、その間に浮動小数点数と固定幅のないDIVを置いていましたが、その中にパディングを入れたいと思っていました。どうですか...

私は育った。 ：Dしかし、私は内側のDIVを中心に置き、幅= 90％を与えます。これまでのところとても良い、非常にシンプルで素晴らしいソリューションではありませんが、時にはあなたが必要とする外観を達成するのに役立ちます。 ;]

b.r.