Pengertian Box Model

Mengatur tata letak halaman web merupakan salah satu hal yang utama dalam penggunaan CSS, pada praktek ini akan dijelaskan konsep pengertian box model dari standart tag HTML, kemudian dilanjutkan mengatur border, margin, padding dan melakukan reset standard setting CSS.

Pengertian Box Model

  • Setiap tag di yang kita gunakan sebenarnya memiliki kotak yang mengelilingi ("Invisible box").
  • Hal ini yang umumnya disebut dangan "Box Model"
  • berikut adalah contoh penggunaan box model, ada 2 dokumen yang saya buat yaitu index2.html dan style2.css
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo box model</title>
  <link rel="stylesheet" href="style2.css">
</head>
<body>
  <h1>Box Model</h1>

  <h3>Demo Block Level Tag</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta in minima reiciendis dolorum soluta numquam voluptatibus perferendis! Labore, rem. Est quas dicta dignissimos qui dolores. Molestias at quis, explicabo perferendis.</p>

  <a href="http://www.google.com">Google</a>
  <img src="tesla-saroni.jpg" alt="gambar pak tesla">
</body>
</html>
  • isi dari style2.css
h1 {
  background-color: chocolate;
}
h3 {
  background-color: aqua;
}
p {
  background-color: blueviolet;
}

Perbedaan Block atau inline level

  • Semua yang kita gunakan disini adalah "Block level tag"
    • artinya lebar dari kotak sebesar layar browser, jadi apabila di tarik diperlebar juga akan ikut membesar seluruh widthnya
    • berikut contoh block level tag h1 - h6, p, ul, li
  • inline-level tag
    • tidak mengambil seluruhnya, jadi flow mengikuti objek yang ada.
    • contoh tag yang bertipe inline adalah hyperlink (a) , gambar (img), input, label
  • Cara merubah tipe box model
    • untuk mengubah dari block level menjadi inline level atau sebaliknya, maka kita gunakan tag berikut:
  ul li {
    display: inline | block
  }

Mengatur jarak dengan Border, Padding dan Margin

  • Dalam Mengatur jarak antar kotak terdapat 4 model box yang perlu kita ketahui.
    • content area
    • tulisan atau gambar yang diapit oleh tags
    • tentu saja content biasanya hanya mengambil area sepanjang objek itu
    • padding
    • jarak dari tulisan ke border
    • border-size
    • besar border
    • margin
    • jarak antar border sisi luar dengan objek yang lain.
    • untuk mengatur jarak padding dapat menggunakan shortcut
h1 {
  padding-top: 10px;
  padding-right: 20px;
  \\ atau disingkat menjadi seperti berikut
  \\ ingat top yang pertama
  \\ sedangkan angka berikutnya mengikuti pola jarum jam 
  padding 10px 20px 30px 40px;
  border-width: 6px;
  border-style: solid;
  border-color: black;
  \\ atau bisa disingkat
  border: 6px solid black;
  \\ kalau cuman mau satu sisi saja
  border-bottom: 6px solid black;
  margin: 100px 30px 10px 5px;
}

Default Style Sheet dan cara melakukan reset

  • pada dasarnya browser memiliki nilai default style sheet
  • untuk melakukan reset ukuran umumnya menggunakan css berikut:
* {
  padding: 0;
  margin: 0;
  border: 0; 
}

Langkah praktek siswa

  • buka kembali index.html dan style.css
  • style.css
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans|josefin+Slab);

* {
  padding: 0;
  margin: 0;
  border: 0;
  font-family: josefin sans;
}

h1 {
  font-family: josefin slab;
  padding: 0.3em 0em 0.3em 0.7em;
}

header li {
  display: inline;
  margin: 0 0 0 0.5em;
}

article {
  font-size: 1.2em;
  padding: 0.3em;
  line-height: 1.4em;
}

article h3 {
  padding-bottom: 0.3em;
}

article img {
  max-width: 10em;
  border: 0.5em solid white;
  margin-top: 1em;
}
footer li{
  display: inline;
  margin: 0 0 0 0.5em;
}

  • Simpan hasilnya dengan File, save