div間の間隔を水平行に入れますか？

Question

横の行に4つのdivがあります。私はdivsの間にスペースを入れたいと思う（マージンを使っていると思う？）が、私がそうすると、divはその親コン​​テナをオーバーフローさせる。ゼロ余裕を持って

、彼らは一行にうまく並ぶ：私は5pxのマージンを導入する際

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div> 
 
</div>

さて、最後のボタンはラップ：

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div> 
 
</div>

これは、width属性がパーセンテージの場合、要素の合計幅に対してマージンを考慮しないためです。これを行う正しい方法は何ですか？

おかげ

Answer 1

：

1. は、このアプローチの利点は、4つのすべての列が同じ幅との間のギャップを持っているということですstyle="width: 25%; float:left;"

を持っているのdivに4色のdivのそれぞれをラップし、あなたのdiv

のスタイルからwidth: 25%; float:left;を削除しますそれらは常に5px * 2になります。この問題をapprachする

.cellContainer { 
 
    width: 25%; 
 
    float: left; 
 
}

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: red;">A</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: orange;">B</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: green;">C</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: blue;">D</div> 
 
    </div> 
 
</div>

Answer 2

私はdiv sが少し小さくすると割合のマージンを加えお勧めします。

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div> 
 
</div>

http://jsfiddle.net/YJT7q/

Answer 3

提供された場合widthが%がpadding/margin秒を考慮しないためです。あなたは、おそらく24%または24.5%に量を減らす必要があります。一度これを行うと良いはずですが、余白はハードコードされているが相対的なサイズなので、これを常に正しく動作させるには、画面サイズに基づいてさまざまなオプションを指定する必要があります。

Answer 4

あなたはパーセントでliタグの左マージンを設定し、親に同じ負の左マージンを設定することができます：可能なアイデアはになり

ul {margin-left:-5%;} 
 
li {width:20%;margin-left:5%;float:left;}

<ul> 
 
    <li>A 
 
    <li>B 
 
    <li>C 
 
    <li>D 
 
</ul>

http://jsfiddle.net/UZHbS/

Answer 5

かなりの数の方法：ここで

は、それがどのように見えるのです。

ボックスサイズのcss3プロパティを使用し、境界線で余白をシミュレートします。

http://jsfiddle.net/Z7mFr/1/

div.inside { 
width: 25%; 
float:left; 
border-right: 5px solid grey; 
background-color: blue; 
box-sizing:border-box; 
-moz-box-sizing:border-box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 
} 

<div style="width:100%; height: 200px; background-color: grey;"> 
<div class="inside">A</div> 
<div class="inside">B</div> 
<div class="inside">C</div> 
<div class="inside">D</div> 
</div> 

あなたの要素の幅の割合を削減し、いくつかのマージン右を追加します。

http://jsfiddle.net/mJfz3/

.outer { 
width:100%; 
background:#999; 
overflow:auto; 
} 

.inside { 
float:left; 
width:24%; 
margin-right:1%; 
background:#333; 
} 

Answer 6

もう一つのアイデア：div要素の反対側に、あなたのマージンを補償します。

例として達成しようとしている間隔のある側：10px、反対側には-10pxで補正します。わたしにはできる。これはすべてのシナリオではうまくいかない可能性がありますが、レイアウトや他の要素の間隔によってはうまくいく可能性があります。

Answer 7

個々の表のセルにすべてのdivを配置し、表のスタイルをpadding: 5px;に設定します。

など。

<table style="width: 100%; padding: 5px;"> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<div style="background-color: red;">A</div> 
 
</td> 
 
<td> 
 
<div style="background-color: orange;">B</div> 
 
</td> 
 
<td> 
 
<div style="background-color: green;">C</div> 
 
</td> 
 
<td> 
 
<div style="background-color: blue;">D</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>