CSSで画像を隙間無く横並びにするいくつかの方法

CSSで画像を隙間無く横並びにするいくつかの方法 CSS
この記事は約3分で読めます。
スポンサーリンク

画像を横並びにする時なぜか空く隙間。
その隙間を埋めてレイアウトする方法をいくつか紹介します。
CSSでのレイアウトで利用しやすいものをご利用ください。

【inline-block】で横並び

要素を横並びにする時よく使うのが「display:inline-block」。
でも「inline-block」で横並びにすると横に隙間ができる。
それを解消して横並びにできるCSSのご紹介。
下記のDEMOでは横並びにする要素を「li」にしましたが、これは「span」や「p」、「a」でも構いません。
横並びにする親要素に、「letter-spacing:-.4em;」「font-size:0;」を指定すると全ブラウザで無駄な隙間が消え、ぴったりと横並びにできます。
さらに横並びにする要素の幅は、「100% ÷ 4 = 25%」にして「display:inline-block;」にします。

DEMO

HTML

<ul class="demo1">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

CSS

.demo1 {
 width: 100%;
 height: 100px;
 display: block;
 letter-spacing: -.4em;
 font-size: 0;
}
.demo1 li {
 width: 25%;
 height: 100%;
 display: inline-block;
}

【inline】で横並び

「display: inline;」でも横並びにできるが、一つ欠点がある。
それは要素に高さがなくなってしまうことだ。
下のDEMOでは、「font」に高さと幅を持たせているから見えているが、要素の中に何もないといくら「height」や「padding」で高さを出そうとしても、高さは出なくなってしまう。

DEMO

  • 1
  • 2
  • 3
  • 4

HTML

<ul class="demo2">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>
.demo2 {
 display: block;
 letter-spacing: -.4em;
 font-size: 0;
}
.demo2 li {
 display: inline;
 letter-spacing: normal;
 font-size: 32px;
 padding: 29px 10%;
}	

【float】で横並び

全ての要素を「table」で組んでいたはるか昔。
古(いにしえ)より伝わる横並びの伝統技法。
昔から使われる横並び方法だが「float」にも、欠点がある。
横並びする要素のすぐ下の要素には必ず「clear:both;」が必要な点。
横並びし終わったら必ず入れるのはめちゃくちゃ忘れがちなので、「それ以降全て横並びになる現象」がたびたび起こっていた。

DEMO

ここまで

HTML

<ul class="demo3">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
<p class="float-end">ここまで</p>
.demo3 {
 width: 100%;
 height: 100px;
 display: block;
}
.demo3 li {
 float:left;
 width: 25%;
 height: 100%;
}
.float-end {
 clear:both;
}
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました