パネル本体が 40px
で上下左右に margin
を 5px
つけることで
想定していた 50px
の中に納まっているのはわかるのですが、
この余白は margin
で設定した方が良いのでしょうか。
#board
の padding
と #board li
の margin
が重なっているのが
イメージし辛くてどうしても気になってしまったのですが
こうしたレイアウトはよく使われるものなのでしょうか。
試しに余白を #board
の padding
だけになるように 10px
から 15px
にして、
要素間の余白を gap: 10px;
としてみたのですが
この場合何かデメリットがあれば教えていただきたいです。
#board {
list-style: none;
margin: 0 0 8px;
/* padding: 10px; */
padding: 15px;
background: #fff;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
#board li {
background: #00aaff;
width: 40px;
height: 40px;
/* margin: 5px; */
cursor: pointer;
border-radius: 4px;
line-height: 40px;
text-align: center;
box-shadow: 0 4px 0 #0088cc;
}
この回答を見るにはプレミアムプランへの登録が必要です
プレミアムプランとは?