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

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

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

CSS
1div { width: 800px; text-align: left;}
2a {
3 display: inline-block;
4 margin:0 1rem 0;/*これだと外枠との間に余白ができてしまう*/
5}

html
1<div>
2 <a href="a.png">a.png</a>
3 <a href="ab.png">ab.png</a>
4 <a href="abc.png">abc.png</a>
5 .......
6</div>

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

css
1* { padding:0;margin:0;box-sizing: border-box;}
2body {
3	padding:50px;
4	font-size:0;
5}
6#over {
7	width:100px;
8	height:100px;
9	background:red;
10}
11#left {
12	display: inline-block;
13	position:relative;
14	width:100px;
15	height:200px;
16	background:black;
17	z-index:1000;
18}
19#wrap {
20	display: inline-block;
21	width: 330px;
22	margin-left:-10px;
23	text-align: left;
24	background:yellow;
25}
26a {
27	display: inline-block;
28	margin-left: 10px;
29	width:100px;
30	height:100px;
31	background:blue;
32}

html
1<body>
2<div id="over"></div>
3<div id="left"></div>
4<div id="wrap"><a></a><a></a><a></a><a></a></div>
5</body>

行動規範の内容に同意します

回答4件

ベストアンサー

こんにちは。

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

サンプル

css
1div { width: 800px; text-align: left;
2  display: flex;
3  flex-flow: wrap;
4  gap: 1em;
5}
6a {
7 display: inline-block;
8}

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

投稿2020/09/16 03:42

Lhankor_Mhy

総合スコア36072

Lhankor_Mhy

2020/09/16 05:06

低評価をされた方、その理由をご提示いただけますか？

ophiacodon

2020/09/16 16:04

ありがとうございます。完璧ですね。

hatena19

2020/09/17 01:47

gapはflexにも使えるのですね。知らんかった。gridだけかと思ってました。 IE非対応が難点ですが、もうそろそろ無視していいですよね。

Lhankor_Mhy

2020/09/17 01:56

IEのシェアは2%弱らしいんで、よほど重要な公的サービスでない限り無視していいと、私も思います。問題は、iOS Safari が対応してないことですよね。OS14でも対応しないらしいですし、バージョン計でシェア12%ぐらいあるみたいなので、無視はできない…… https://caniuse.com/flexbox-gap

kyoya0819

2020/09/17 05:08

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

kyoya0819

2020/09/17 05:10 編集

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

Lhankor_Mhy

2020/09/18 03:17

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

行動規範の内容に同意します

CSS
1div {
2 width: calc(800px + 1rem);
3 margin: 0 -1rem;
4 text-align: left;
5}
6a {
7 display: inline-block;
8 margin-left: 1rem;
9}

投稿2020/09/15 15:36

kei344

総合スコア69398

ophiacodon

2020/09/15 16:28

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

行動規範の内容に同意します

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

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

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

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

css
1div {
2  width: 800px;
3  display: flex;
4  flex-wrap: wrap;
5  justify-content: space-between;
6  border: 1px solid gray;
7}

投稿2020/09/15 16:17

総合スコア33694

2020/09/15 16:52

特に矛盾はしてないと思いますが、実装上すべての条件を満たすことができないという意味でしょうか。 flex でやる方法も考えましたが、無理やり一行してしまうので今回はうまくいかないと判断しました。

ophiacodon

2020/09/15 16:54

あ、矛盾の意味がわかりました。右側の余白は可変です。ただし、最小値は0にしたいという意味です。

ophiacodon

2020/09/15 17:18

flex-wrap は知りませんでした。機会があったら使ってみます。

hatena19

2020/09/15 17:34

えっと、解決ではないのですか。どこが想定と異なりますか？「機会があったら」ということは今回は使えないということですか。その理由は?

ophiacodon

2020/09/15 18:09

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

hatena19

2020/09/15 18:40

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

ophiacodon

2020/09/15 18:46

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

行動規範の内容に同意します

css
1div {
2    width: 800px;
3    text-align: left;
4}
5div > a {
6    display: inline-block;
7    margin: 0;
8}
9div > a ~ a {
10    margin-left: 1rem;
11}