ピクセル単位で要素の幅を減らす方法

Question

幅が25%に設定された4つの要素があります。彼らはページの幅を完全に埋める。

それぞれの間に1pxの隙間を入れたいと思います。これを行うと（例えばmargin-right: 1px;）、最後の要素は次の行にオーバーフローします。最初にピクセル単位で幅を計算することなく、各要素の幅を1pxでどのように減らすことができますか？

Answer 1

私はコメント欄に@Lubnahの助けを借りて、ソリューションを自分自身を発見しました。

.tab-list li { 
    margin-right: -1px; 
    border-left: 1px solid #fff; 
} 

.tab-list li:first-of-type { 
    border-left: none; 
    margin-right: 0px; 
} 

Answer 2

幅はコンテナ内で計算されます。設定したすべてのパディングまたは余白が幅に追加されます。

は23％まであなたの幅を設定し、1％まであなたのマージンが

左マージン（1）プラス幅（23）に加えて、ページ上の4回を配置（1）= 25その権利利益率アップに追加されます100

Answer 3

にあなたはCSS calcを使用することができますが、そのブラウザのサポートは不完全です：

width: calc(25% - 1px); 
width: -moz-calc(25% - 1px); 
width: -webkit-calc(25% - 1px); 

Answer 4

あなたは幅自動マージン右で各要素内の内側のdivを持つことによって、わずかにごまかすことができます：http://jsfiddle.net/7R6zZ/

<div class="outer"> 
<div class="inner">1</div> 
</div> 
<div class="outer"> 
<div class="inner">2</div> 
</div> 
<div class="outer"> 
<div class="inner">3</div> 
</div> 
<div class="outer"> 
<div class="inner">4</div> 
</div> 

.outer { 
width:25%; 
float:left; 
} 
.outer .inner { 
width:auto; 
margin-right:1px; 
background:#999; 
min-height:300px; 
} 

Answer 5

使用box-sizing: border-box;と国境：1pxの

このフィドルを参照してください。

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
div { 
    width: 25%; 
    border-right: 1px solid right; 

}

Answer 6

使用ボックスのサイズbox-sizing:border-box とは、背景と同じ色で1ピクセル右の境界を使用として

.box{ 
     width:25%; 
     box-sizing:border-box; 
     border-right: 1px solid "same color as your background" 
}