User Agent Stylesheet dan Margin Collapsing

by

User Agent Stylesheet

Buka file index.html, lalu buka Developer Tools. Lalu inspect element <body>. Terdapat user agent stylesheet, atau stylesheet default yang ditambahkan oleh browser.

Nilai margin 8 px yang ditambahkan oleh browser, dapat direset dengan menambahkan rule pada stylesheet yang kita buat.

body{
    font-family: 'Nunito', sans-serif;
    margin: 0px;
}

#product-title{
    background-color: red;
    padding: 15px;
    border: 2px solid black;
    margin: 20px;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Margin Collapsing

Element <h1> sendiri memiliki default margin, silakan inspect element <h1>, dapat dilihat nilai margin adalah 19.920.

Jika diperhatikan element <section> pertama dengan element <h1> <section> kedua, area margin saling bertabrakan.

Walaupun bertabrakan, CSS akan melakukan margin collapsing, dengan margin yang lebih besar yang diutamakan. Jadi dapat margin <h1> pada section kedua dianggap tidak ada saat bertabrakan dengan element <section> pertama dengan margin yang lebih besar.

Dengan mengetahui hal detail diatas, dapat membantu mencegah kebingungan saat melakukan desain web page.

Anda dapat melihat lebih mendalam mengenai margin collapsing di https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Sharing is caring:

Leave a Comment