Q&A
spanやbuttonなど、様々な種類のHTML要素が横並びになっている際に、個別にmarginを設定することなく、一括で要素間にmarginを設定する方法があればご教示いただきたいです。
下記はデモです。
デモ(CodeSandBox)
例えば子要素が全てspanであれば、下記のように一括でmarginが設定できるかと思います。
css
1.hogeWrap { 2 ... 3} 4.hogeWrap span { 5 margin: 0 5px; 6} 7.hogeWrap span:first-child { 8 margin-left: 0; 9} 10.hogeWrap span:last-child { 11 margin-right: 0; 12}
しかし、デモのような単一の要素で構成されていない子要素間のmarginの設定をする方法を検索しても見つけられなかったため、質問した次第です。
現状だとそれぞれの子要素にセレクタを付与してmarginを設定する方法しか思いつかないため、効率化できる方法があればご教示いただきたいです。
ソースコード
html
1<body> 2 <div class="hogeWrap"> 3 <span>hoge</span> 4 <button>hoge</button> 5 <input type="text" placeholder="hoge" /> 6 <span>hoge</span> 7 </div> 8</body>
css
1.hogeWrap { 2 display: flex; 3 background: lightgray; 4 padding: 10px; 5}
回答1件
0
ベストアンサー
css
1.hogeWrap > * { 2 margin: 0 5px 3}
投稿2020/09/06 03:13
総合スコア10429
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。