CSS におけるマージンとパディング: これらの間隔プロパティはどのように異なりますか?

違いを理解する: CSS のマージンとパディング

CSS で要素の周囲のスペースを調整する場合、マージンとパディングという 2 つの重要なプロパティが現れます。どちらも間隔を操作するために使用されますが、異なる動作と用途を示します。

垂直マージン自動折りたたみ

基本的な違いは、垂直マージンの動作にあります。隣接する要素のマージンは重なり合いますが、パディングは重なりません。 1em パディングの要素の後に 1em パディングの別の要素が続く場合、コンテンツ間の垂直方向のスペースの合計は 2em になります。一方、1em のマージンを使用すると、マージンが重なるため、垂直方向の間隔は 1em のままになります。この機能は、コンテキストに関係なく、要素間の一貫した間隔を維持する場合に特に役立ちます。

クリック領域とスタイルへの組み込み

パディングは要素の一部とみなされ、拡張されます。クリック領域と背景色と画像に組み込まれます。ただし、マージンは要素の外側にあり、これらの側面には影響しません。

ビジュアル デモンストレーション

違いを説明するために、簡単な HTML と CSS の例を見てみましょう。

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box padding">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box margin">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

div.box > div {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    text-align: center;
}
div.padding > div {
    padding-top: 20px;
}
div.margin > div {
    margin-top: 20px;
}

ご覧のとおり、パディングのある要素では垂直方向の間隔が増加していますが、マージンのあるものは 1em のギャップを維持します。

以上がCSS におけるマージンとパディング: これらの間隔プロパティはどのように異なりますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。