回答編集履歴

2 補足

退会済みユーザー

退会済みユーザー

2015/04/18 00:53  投稿

> 4つの画像それぞれの上下左右に少しの隙間ができてしいます。
その隙間が、<img/>のmarginなのか<li/>のmarginかpaddingなのかわからないので、
chromeのデベロッパーツールでみてみましょう。
右上の三ボタンのところからその他のツール>デベロッパーツールとたどります。
開いたウィンドウの該当タグを選択し、右側のペインで一番下までスクロールさせると、4重に囲まれた矩形があるはずです。
(どれが該当タグか分からない時は、画面左上の虫眼鏡をクリックしてから調べたいエレメントにマウスカーソルを合わせましょう)  
濃いオレンジはmargin、薄いオレンジがborder、緑がpadding、青がエレメント本体の大きさです。
marginとborderが0であれば余白はできないので、それが0ではない要素のその属性について、
```
margin: 0px;
```
あるいは
```
padding: 0px;
```
すると、ご希望の状態になるかと思います。
1 誤植

退会済みユーザー

退会済みユーザー

2015/04/18 00:50  投稿

> 4つの画像それぞれの上下左右に少しの隙間ができてしいます。
その隙間が、<img/>のmarginなのか<li>のmarginかpaddingなのかわからないので、
その隙間が、<img/>のmarginなのか<li/>のmarginかpaddingなのかわからないので、
chromeのデベロッパーツールでみてみましょう。
右上の三ボタンのところからその他のツール>デベロッパーツールとたどります。
開いたウィンドウの該当タグを選択し、右側のペインで一番下までスクロールさせると、4重に囲まれた矩形があるはずです。
濃いオレンジはmargin、薄いオレンジがborder、緑がpadding、青がエレメント本体の大きさです。
marginとborderが0であれば余白はできないので、それが0ではない要素のその属性について、
```
margin: 0px;
```
あるいは
```
padding: 0px;
```
すると、ご希望の状態になるかと思います。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る