2021年07月13日

[CSS]
横並び要素の、最終行のマージンだけをなくす方法

エリアの中に横並び要素を並べた際、各行の要素にはマージンを付けたいけれど、最終行にも同じようにマージンを付けてしまうとデザインが崩れてしまう場合があります。
今回はその対処法です。

通常の状態

文字だけだと状態がよくわからないと思いますので、図を用意しました。

こちらのコーディングは次のようになっています。

<div class="label">
  <ul>
    <li>発熱</li>
    <li>腹痛</li>
    <li>下痢</li>
    <li>便秘</li>
    <li>喉の痛み</li>
    <li>吐き気</li>
    <li>胸やけ</li>
    <li>頭痛</li>
    <li>動悸</li>
    <li>発疹</li>
  </ul>
</div>
.label{
  background: #dcf1fb;
  border-radius: 10px;
  padding: 20px 30px;
}

.label ul {
  display: flex;
  flex-wrap: wrap;
}

.label ul li {
  display: inline-block;
  padding: 10px 30px;
  border: 1px solid #38bf9e;
  border-radius: 5px;
  background: #fff;
  margin: 0 15px 15px 0;
  line-height: 1;
}

中のリストをinline-blockにし、右と下に15pxのマージンを付けることで隣や下の要素と空間を取るようにしていますが、全体を水色の枠で囲んでいますので、最終行や右端の要素からも15pxのマージンが取られることになり、バランスが悪いです。

解決方法

最後のいくつかの要素を選んでmargin:0にすれば良いですが、固定幅ならともかく、レスポンシブ対応だとそういうわけにはいきません。
リスト要素の外側の親要素にネガティブマージンをつけることで対処できます。

.label ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-bottom: -15px;
}

このようになります。

まとめ

親要素に子要素のマージン量と同じ量のネガティブマージンを用意することでレスポンシブでも問題なく同じ幅のマージンを指定することができるようになります。

CSSネガティブマージンマージン

この記事に関連する記事

この記事を書いた人

おおつき@TTI

Webディレクター、Webコンサルタント、Webコーダー、日曜プログラマー、他色々やってます。

気になったら
まずはご相談を

あなたの悩みのために専門家がチームを組み、課題解決に取り組みます。
まずはお気軽にお問い合わせください。

日本全国どこでも対応します。

お問い合わせはこちら 無料相談はじめました！