質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

多数の inline-block 要素を並べた場合に、兄弟要素間にのみ余白を設ける方法

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 245

ophiacodon

score 20

固定幅の div 要素内に、高さ固定の inline-block 要素を多数配置します。
兄弟となる要素の間には、一定の余白を入れたいと考えますが親要素である div 要素の外枠との間には余白を入れたくありません。このような場合、どのようにするのが最もスマートでしょうか?
(追記: 右側の余白は可変ですが、最小値は 0 になるようにしたいです。)

ただし、inline-block 要素の幅と個数は不定であり複数行にわたる場合もあります

div { width: 800px; text-align: left;}
a {
 display: inline-block;
 margin:0 1rem 0;/*これだと外枠との間に余白ができてしまう*/
}
<div>
 <a href="a.png">a.png</a>
 <a href="ab.png">ab.png</a>
 <a href="abc.png">abc.png</a>
 .......
</div>

いただいた回答をもとに、実装してみました。
これでほぼ、期待通りの挙動になることが確認できます。
ただ、やはり左側は小細工が必要になるケースもありそうですね(右側でも実装可)。
おそらく他に方法はないと思われますので、もう少し待って別の回答がつかなければ、ベスト回答とさせていただきます。

* { padding:0;margin:0;box-sizing: border-box;}
body {
    padding:50px;
    font-size:0;
}
#over {
    width:100px;
    height:100px;
    background:red;
}
#left {
    display: inline-block;
    position:relative;
    width:100px;
    height:200px;
    background:black;
    z-index:1000;
}
#wrap {
    display: inline-block;
    width: 330px;
    margin-left:-10px;
    text-align: left;
    background:yellow;
}
a {
    display: inline-block;
    margin-left: 10px;
    width:100px;
    height:100px;
    background:blue;
}
<body>
<div id="over"></div>
<div id="left"></div>
<div id="wrap"><a></a><a></a><a></a><a></a></div>
</body>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+2

div {
 width: calc(800px + 1rem);
 margin: 0 -1rem;
 text-align: left;
}
a {
 display: inline-block;
 margin-left: 1rem;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/16 01:28

    なるほど、主旨は理解できました。
    しかし、この方法ですと div に色がついていたりした場合、要求される条件が少々厳しいかもしれませんね。

    キャンセル

+1

質問をまとめると下記になりますね。

  • 親要素固定幅
  • 兄弟となる子要素の間には、一定の余白を入れたい
  • 親要素の外枠との間には余白を入れたくない
  • 子要素の幅と個数は不定であり複数行にわたる場合もあります

「子要素の幅が一定でない」「子要素間の余白は一定」「親要素の外枠との間には余白なし」は矛盾しますね。

「子要素間の余白は一定」ではなく両端揃え均等配置というレイアウトならFlexboxでjustify-content: space-between; と flex-wrap: wrap; を設定すれば可能です。

div {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid gray;
}

Codepenサンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/16 03:09

    <a>の間の余白は等しくして、余ったら右側で調整したいという感じですね。
    word-break:normal; と似たような設計です。
    最後に2個だけ余ってしまうと、左右に離れてしまって格好がわるくなってしまうので。
    ですので、最初にいただいた回答の方が今回の要求には合致します。

    キャンセル

  • 2020/09/16 03:40

    右側の余白は0でなくてもよいということですね。
    最初の仕様とは変わったということね。了解です。

    キャンセル

  • 2020/09/16 03:46

    変わったというより、私の表現が適切ではなかったということでしょうか。
    丁寧にご回答いただきありがとうございます。

    キャンセル

checkベストアンサー

0

こんにちは。

ブラウザ対応に難点があるのですが、gap を使うのはいかがでしょうか。

サンプル

div { width: 800px; text-align: left;
  display: flex;
  flex-flow: wrap;
  gap: 1em;
}
a {
 display: inline-block;
}

参考:
gap (grid-gap) - CSS: カスケーディングスタイルシート | MDN

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/17 14:08

    iOS非対応は結構致命的ですね。
    iOS14も良い噂が無いに等しいので当分13が続きそうです。

    キャンセル

  • 2020/09/17 14:09 編集

    ちなみに日本国内にシェアを絞れば38.14%です。(CanIUse

    キャンセル

  • 2020/09/18 12:17

    日本はiPhone強いですからね……
    ただ、モバイルサイズでは縦並びレイアウトにするなど、スクリーンサイズの違いを使った回避方法はありそうです。

    iPad はどうしようもないですが。

    キャンセル

0

div {
    width: 800px;
    text-align: left;
}
div > a {
    display: inline-block;
    margin: 0;
}
div > a ~ a {
    margin-left: 1rem;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/09/17 00:51

    ありがとうございます。間接セレクタですね。
    要素が複数行にならなければ、うまくいきますね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る