CSSを使用してイメージの中間の空白をどのように考慮しますか？

Question

CSSの幅を使用してイメージの縮尺を調整しようとしているため、イメージが応答するようになりました。画面全体に3つの画像を一定の最大幅まで持たせたいのですが、幅を33.3％に設定した後で、その間の空白が1つノックダウンします。私はまだ画像の間に小さな白い空白が欲しいですが、画像をコンテナの幅の100％に広げたいと思います。この問題を解決するにはどうすればよいですか？

img{ 
    width:33.3%; 
} 

例： http://jsfiddle.net/ErNeT/1736/

Answer 1

まず、すべてのHTML要素はボーダーボックスに設定ボックスのサイズ変更プロパティを持っていることを確認してください。これにより、要素の幅と高さの合計に詰め物と境界線が含まれます。 source

img{ 
    box-sizing: border-box; 
    border: 5px solid transparent;//keep your little margins by transparent borders 5px wide 
} 

あなたは他の幅に5pxのを変更することにより、あなたはそれらの間たいどのくらいの間隔に変更することができます。

Answer 2

あなたは空白を削除するには、コンテナにfont-size: 0;を設定することができ、そしてあなただけ戻っIE9にサポートする必要がある場合は、余裕をもって幅を計算するためにcalc()を使用することができます。または、最新のブラウザをサポートする必要がある場合のみ、flexboxを使用することができます。ここでは、両方の

例： http://jsfiddle.net/s3cmnpo3/

Answer 3

これを試してみてください：

img{ 
    width:33.3%; 
    float: left; 
}