css - CSS: div 内の 4 つの画像の位置を調整する

Question

この問題があります。Photoshop で円を 4 つに切り取り、それらを HTML ページの 4 つのリンクとして使用したかったのです。SO私はこのようなDIVを作成しました：

<div id="box"> 

    <a href="www.abc.com"><img src="G.png" /></a>
    <a href="www.efg.net"><img src="UW.png" /></a>

    <a href="www.yahoo.com"><img src="DW.png" /></a>
    <a href="www.google.com"><img src="R.png" /></a>
</div>

そして、次のような CSS ファイル:

#box {
    width:185px;
}

しかし、結果は私が望むものではありません。写真でわかるように、これらの 4 つの画像の間にはスペースがあります。この問題を解決するにはどうすればよいですか? ありがとうございました。 http://www.img4up.com/up2/96145115384598309149.png

Answer 1

以下を使用できます。

img { margin: 0; padding: 0; }

a { float: left; margin: 0; padding: 0; }

Answer 2

パディングとマージンを 0 に設定してみましたか?

#box a, #box img{margin:0px; padding:0px;}

Answer 3

空白と行の高さです (空白はインライン要素とインラインブロック要素の間で受け入れられます)。それを取り除く方法はいくつかありますが、これが私のお気に入りです。

<img /><!--
--><img />

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

次のように、行の高さによって生じる間隔をなくすことができます。

line-height: 1;