![イメージ説明](21200c3575edddae0d6a86981777392c.png) イメージ画像です作る才能がなくて並行に見えませんが、平行のつもりです ### 前提・実現したいこと２つのdivを横並びにして、２つの間を１とすると両端が２となるくらいの余白を作りたいです。ですが、 divを２つ横並びにすることはできても、中央の間隔がないです。何がいけないでしょうか？ ### 該当のソースコード ```HTML momo その１説明その２説明 ``` ```CSS @charset "utf-8" #number{display: flex; justify-content: space-between; text-align: center; margin-left: 250px; margin-right: 250px; padding-left: 30px; padding-right: 30px;} ``` ### 補足情報 HTMLのｐの説明は長文が入ります。 divが横並びで間隔があれば、作ったsectionのidは無視してくださって大丈夫です。

子要素間を開けたいなら、子要素に余白を設定する必要があります。 ```html #number { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; } #number div { width: 37.5%; margin-right: 2.5%; margin-left: 2.5%; } その１説明その２説明 ```

cssで横並びのflexboxの間隔を開ける方法が知りたいです

イメージ画像です
作る才能がなくて並行に見えませんが、平行のつもりです

前提・実現したいこと

２つのdivを横並びにして、２つの間を１とすると両端が２となるくらいの余白を作りたいです。ですが、
divを２つ横並びにすることはできても、中央の間隔がないです。何がいけないでしょうか？

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3
4<head>
5 <meta charset="utf-8">
6 <title>momo</title>
7</head>
8<body>
9<section id=number>
10  <div>
11     <h3>その１</h3>
12     <p>説明</p></d>
13  <div>
14     <h3>その２</h3>
15     <p>説明</p></d>
16</section>
17</body>
18

CSS
1@charset "utf-8"
2#number{display: flex;
3        justify-content: space-between; 
4        text-align: center;
5        margin-left: 250px;
6        margin-right: 250px;
7        padding-left: 30px;
8        padding-right: 30px;}
9

補足情報

HTMLのｐの説明は長文が入ります。
divが横並びで間隔があれば、作ったsectionのidは無視してくださって大丈夫です。

gogoweb_ikeda

2021/02/26 00:17

全ての要素に閉じタグがありませんが適切に閉じられていますか？

Lhankor_Mhy

2021/02/26 01:59 編集

gogoweb_ikedaさんがおっしゃっているとおり、閉じタグの省略が「不可」となっているdiv,h3の閉じタグを省略すると、構造が不明になります。ブラウザはHTML文書の文法エラーを出力しない代わりに、文法エラーにならないような解釈をします。結果、意図しない閉じタグが挿入されレイアウトが崩れることがありますので、省略しないことをおすすめします。また、p要素の閉じタグ省略も構造に条件があり、意図しない閉じタグが挿入されがちのため、省略をしない方が無難です。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/div https://developer.mozilla.org/ja/docs/Web/HTML/Element/p https://developer.mozilla.org/ja/docs/Web/HTML/Element/Heading_Elements

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

回答1件

ベストアンサー

子要素間を開けたいなら、子要素に余白を設定する必要があります。

html
1<html>
2    <head>
3        <style>
4        #number {
5            display: flex;
6            flex-wrap: wrap;
7            justify-content: center;
8            text-align: center;
9        }
10        #number div {
11            width: 37.5%;
12            margin-right: 2.5%;
13            margin-left: 2.5%;
14        }
15        </style>
16    </head>
17    <body>
18        <section id="number">
19            <div>
20                <h3>その１</h3>
21                <p>説明</p>
22            </div>
23            <div>
24                <h3>その２</h3>
25                <p>説明</p>
26            </div>
27        </section>
28    </body>
29</html>