Memahami Box Sizing

Mari kita pahami dulu element html dapat dikategorikan dalam 2 tipe, yaitu

block level element, contoh: div, h1
inline level element, contoh: a

Block element secara default akan memiliki 100% width terhadap container. Sementara inline element memiliki width sesuai contentnya.

Saat mengatur width block level element (misalnya div), perlu dipahami property box-sizing. Untuk lebih jelasnya, tambahkan css untuk mengatur width dan height pada #product-title.

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

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

.section-title{
    color: teal;
}

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

Lalu buka file index.html, Buka Developer tools dan inspect element <section> pertama, lihat bagian box model.

Dapat dilihat aktual width dan height ( 723 x 434), berbeda dengan width dan height yang diset melalui CSS (669 x 400).

Perbedaan diatas terjadi karena browser menambahkan border dan padding dalam perhitungan width. Sementara default CSS, padding dan border tidak dihitung.

Rule diatas dapat ditimpa dengan mengatur property box-sizing, dari defaultnya content-box menjadi border-box;

Tambahkan pada css box-sizing: border-box; dengan css selector * agar diterapkan pada seluruh element. Berikut isi file style.css dan file index.html

*{
    box-sizing: border-box;
}

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

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

.section-title{
    color: teal;
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section>
            <h1 class="section-title">Pilih paket langganan</h1>
        </section>        
    </main>
</body>
</html>

Jika Anda cek kembali melalui developer tools, maka ukuran CSS dan Aktual akan sama karena padding dan border diikut sertakan dalam perhitungan width.

Aktual width: 720, CSS width: 686 + padding (15px * 2) + border (2px * 2).

Perhatian, angka pada contoh diatas adalah tidak mutlak, karena mengikuti ukuran viewport browser. Saat tutorial dibuat, dan saat Anda mencoba, ukuran viewport bisa berbeda.

Sharing is caring:

Leave a Comment Cancel reply