幅が 960px の inner の中に、幅が 300px、右側のマージンが 30px のボックス（.item）を３つ並べる為に、下記のようなコードを記述したとします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- ヘッダー -->
</header>
<main>
<div class="inner">
<div class="container">
<div class="item">
【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプル
</div>
<div class="item">
【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプル
</div>
<div class="item">
【item 300px】 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
サンプルサンプル
</div>
</div><!-- container -->
</div><!-- inner -->
</main>
<footer>
<!-- フッター -->
</footer>
</body>
<html>
.inner{
background-color: #fff;
width: 960px;
margin: 0 auto;
}
.item {
width: 300px;
margin-right: 30px;
}表示を確認してみると・・・
このように、３つ目のボックスが下に落ちてしまいます。それでは、このようにならない為にはどうしたら良いのでしょうか？
今回は、それを解決する３つの方法についてご紹介したいと思います。
目次
解決方法
1. 右端のボックスに、マージンなしのクラスを追加する
３つ目のボックスに『item-no-margin』というクラス名を与え、スタイルシートに下記を追記すると・・・
.item-no-margin {
width: 300px;
background-color: #08B9D4;
float: left;
margin-bottom: 30px;
}下の画像（）のように綺麗にボックスを並べることができます。
この方法は３つ目だけに違うクラスを使うので、WordPress化するときにあまり好ましくないというデメリットがあります。
2. 擬似クラスで３番目の要素だけマージンをなくす
擬似クラスで、３番目の要素だけマージンをなくします。
.item:nth-child(3) {
margin-right: 0;
}擬似要素にはいろいろな記述方法がありますが、上記はそのうちの一つで『最初から○番目にある要素にスタイルを適用する』という書き方となります。
3. 親要素に子要素で設定したマージン分を、ネガティブマージンで差し引く
親要素に対して、子要素で指定した 30px 余計な分を、ネガティブマージンで引いてあげるという考え方です。
.container {
background-color: #ccc;
overflow: hidden;
margin-right: -30px;
}ネガティブマージンとは、marginプロパティにマイナスの数値を指定することをいいます。
まとめ
今回は、複数の要素を綺麗に横並びにしたいのに、最後の要素が下に落ちてしまう場合の解決策についてまとめました。
ぜひ、いろいろな方法をお試しくださいね。