HTML/CSSに関しての質問です. 下記の図の図形a,cとb,dの間隔を広げたいのですが,どのようにコードを記述すればよいのでしょうか.

HTML/CSSに関しての質問です. 下記の図の図形a,cとb,dの間隔を広げたいのですが,どのようにコードを記述すればよいのでしょうか. コードは以下の通りです. ---HTML--- <div class="box"> <div class="boxA">a</div> <div class="boxB">b</div> <div class="boxC">c</div> <div class="boxD">d</div> </div> ----------- ---CSS--- .box { display: flex; align-content: space-around; flex-wrap: wrap; text-align: center; margin-top: 30px; } .boxA { background-color: #e4d6a7; border-radius: 10% 10%; width: 12cm; height: 6cm; } .boxB { background-color: #e4d6a7; border-radius: 10% 10%; width: 17cm; height: 6cm; } .boxC { background-color: #e4d6a7; border-radius: 10% 10%; width: 12cm; height: 6cm; } .boxD { background-color: #e4d6a7; border-radius: 10% 10%; width: 17cm; height: 6cm; } .boxA, .boxB, .boxC, .boxD { text-align: center; overflow: hidden; overflow-y: scroll; margin: 0 auto; } ----------

画像

HTML、CSS | プログラミング8閲覧xmlns="http://www.w3.org/2000/svg">50

ベストアンサー

0

the********さん >・・・・a,cとb,dの間隔を広げたい・・・・・・・・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> .box { display: flex; align-content: space-around; flex-wrap: wrap; text-align: center; margin-top: 30px; } .boxA { background-color: #e4d6a7; border-radius: 10% 10%; width: 12cm; height: 6cm; } .boxB { background-color: #e4d6a7; border-radius: 10% 10%; width: 17cm; height: 6cm; } .boxC { background-color: #e4d6a7; border-radius: 10% 10%; width: 12cm; height: 6cm; } .boxD { background-color: #e4d6a7; border-radius: 10% 10%; width: 17cm; height: 6cm; } .boxA, .boxB, .boxC, .boxD { text-align: center; overflow: hidden; overflow-y: scroll; margin: 10px auto; /* 修正 */ } </style> </head> <body> <div class="box"> <div class="boxA">a</div> <div class="boxB">b</div> <div class="boxC">c</div> <div class="boxD">d</div> </div> </body> </html>

ThanksImg質問者からのお礼コメント

できました!ありがとうございます!!

お礼日時:9/23 17:13