子要素のmarginが親要素を超えて適用されるマージンの突き出しを解決するには下記のような方法があるようです。
①親要素にわずかなpaddingやborderを設定することで、子要素のmarginが親要素を超えて突き出る現象を防ぐことができます。
.parent {
border: 1px solid transparent;
}
.parent {
padding: 1px;
}
②親要素にoverflow: autoまたはoverflow: hiddenを設定することで、子要素のマージン突き出しを回避できます
.parent {
overflow: auto; /* or ‘hidden’ */
}
③親要素に::beforeや::after疑似要素を使って内容を追加し、display: content: " "を適用することで、マージンの相殺を防ぐことができます。
.parent::before,
.parent::after {
content: ” “;
}
④親要素にdisplay: flexを設定することで、子要素間のマージンの相殺を防ぐことができます。
.parent {
display: flex;
flex-direction: column;
}
⑤paddingを使う
いくつかの方法がありますが、状況に合わせて対応していく形になります。
