Tutorial css

CSS Box Model

Box Model adalah konsep fundamental dalam CSS yang menjelaskan bagaimana setiap elemen HTML memiliki area berbeda: content, padding, border, dan margin. Memahami Box Model adalah kunci untuk menguasai layout CSS.

Komponen Box Model

Setiap elemen HTML terdiri dari 4 area:

+---------------------------+
|         MARGIN            |
|  +---------------------+  |
|  |      BORDER         |  |
|  |  +---------------+  |  |
|  |  |    PADDING    |  |  |
|  |  |  +---------+  |  |  |
|  |  |  | CONTENT |  |  |  |
|  |  |  +---------+  |  |  |
|  |  +---------------+  |  |
|  +---------------------+  |
+---------------------------+

1. Content

Area tempat text dan gambar berada:

.box {
  width: 200px; /* Lebar content */
  height: 100px; /* Tinggi content */
}

2. Padding

Ruang kosong di dalam element, antara content dan border:

.box {
  padding: 20px; /* Semua sisi 20px */
  padding: 10px 20px; /* Atas-bawah 10px, kiri-kanan 20px */
  padding: 10px 15px 20px 25px; /* Atas, kanan, bawah, kiri */
}

/* Atau individual */
.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

3. Border

Garis tepi yang mengelilingi padding dan content:

.box {
  border: 2px solid #333; /* Lebar, style, warna */
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Individual border */
.box {
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double purple;
}

4. Margin

Ruang kosong di luar element, antara element dengan element lain:

.box {
  margin: 20px; /* Semua sisi 20px */
  margin: 10px 20px; /* Atas-bawah 10px, kiri-kanan 20px */
  margin: 10px 15px 20px 25px; /* Atas, kanan, bawah, kiri */
}

/* Atau individual */
.box {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

Box Sizing

Content Box (Default)

Width dan height hanya menghitung content:

.content-box {
  box-sizing: content-box; /* Default */
  width: 200px; /* Hanya content 200px */
  padding: 20px; /* Total width = 200 + 40 = 240px */
  border: 5px solid black; /* Total width = 240 + 10 = 250px */
}

Border Box (Recommended)

Width dan height menghitung content + padding + border:

.border-box {
  box-sizing: border-box; /* Lebih mudah diprediksi */
  width: 200px; /* Total width = 200px */
  padding: 20px; /* Content = 200 - 40 - 10 = 150px */
  border: 5px solid black;
}

/* Terapkan ke semua element */
* {
  box-sizing: border-box;
}

Width dan Height

Fixed Size

.fixed-size {
  width: 300px; /* Lebar tetap */
  height: 200px; /* Tinggi tetap */
}

Percentage

.responsive-size {
  width: 100%; /* Mengikuti parent */
  height: 50%; /* 50% dari tinggi parent */
  max-width: 600px; /* Maksimal 600px */
  min-width: 300px; /* Minimal 300px */
}

Viewport Units

.viewport-size {
  width: 50vw; /* 50% dari viewport width */
  height: 100vh; /* 100% dari viewport height */
  min-height: 100vh; /* Minimal setinggi viewport */
}

Margin Techniques

Centering Element

.center-block {
  width: 600px;
  margin: 0 auto; /* Center horizontal */
}

Margin Collapse

Margin vertikal bisa collapse (bergabung):

.element1 {
  margin-bottom: 20px;
}

.element2 {
  margin-top: 30px; /* Total gap = 30px (bukan 50px) */
}

Negative Margin

.overlap {
  margin-top: -20px; /* Overlap dengan element atas */
  margin-left: -10px; /* Geser ke kiri */
}

Padding Techniques

Equal Padding

.equal-padding {
  padding: 20px; /* Semua sisi sama */
}

Different Padding

.card {
  padding: 30px 20px; /* Vertikal lebih besar */
}

.button {
  padding: 12px 24px; /* Horizontal lebih besar */
}

Border Styles

Border Style Options

.border-styles {
  border-style: solid; /* Garis solid */
  border-style: dashed; /* Garis putus-putus */
  border-style: dotted; /* Titik-titik */
  border-style: double; /* Garis ganda */
  border-style: groove; /* Efek 3D masuk */
  border-style: ridge; /* Efek 3D keluar */
  border-style: inset; /* Efek tenggelam */
  border-style: outset; /* Efek timbul */
}

Border Radius

.rounded {
  border-radius: 8px; /* Sudut melengkung */
}

.circle {
  border-radius: 50%; /* Bulat penuh */
}

.custom-radius {
  border-radius: 10px 20px 30px 40px; /* Tiap sudut beda */
}

Contoh Praktis: Card Component

.card {
  /* Box sizing untuk predictable sizing */
  box-sizing: border-box;

  /* Ukuran */
  width: 100%;
  max-width: 400px;

  /* Spacing */
  padding: 24px;
  margin: 16px;

  /* Border */
  border: 1px solid #e2e8f0;
  border-radius: 12px;

  /* Background */
  background-color: white;

  /* Shadow untuk depth */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.card-content {
  margin-bottom: 16px;
}

.card-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}

Contoh Layout dengan Box Model

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }

      .header {
        background-color: #2c3e50;
        color: white;
        padding: 40px 30px;
        margin-bottom: 30px;
        border-radius: 8px;
        text-align: center;
      }

      .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }

      .card {
        background-color: white;
        padding: 30px;
        border: 1px solid #ddd;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .card-title {
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3498db;
      }

      .card-text {
        color: #666;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .button {
        background-color: #3498db;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .button:hover {
        background-color: #2980b9;
      }

      .info-box {
        background-color: #e8f4f8;
        border: 1px solid #bee5eb;
        border-left: 4px solid #17a2b8;
        padding: 20px;
        margin: 20px 0;
        border-radius: 4px;
      }

      .warning-box {
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
        border-left: 4px solid #ffc107;
        padding: 20px;
        margin: 20px 0;
        border-radius: 4px;
      }

      .spacing-demo {
        background-color: #f8f9fa;
        border: 2px dashed #6c757d;
        padding: 20px;
        margin: 20px 0;
        border-radius: 8px;
      }

      .inner-box {
        background-color: #007bff;
        color: white;
        padding: 15px;
        margin: 10px;
        border: 3px solid #0056b3;
        border-radius: 6px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>CSS Box Model Demo</h1>
        <p>Contoh penggunaan margin, padding, border dalam layout</p>
      </div>

      <div class="card-grid">
        <div class="card">
          <h2 class="card-title">Content Area</h2>
          <p class="card-text">
            Ini adalah area content dengan padding yang memberikan ruang
            bernapas. Border memberikan batas yang jelas, dan margin memberikan
            jarak dengan elemen lain.
          </p>
          <button class="button">Read More</button>
        </div>

        <div class="card">
          <h2 class="card-title">Spacing Control</h2>
          <p class="card-text">
            Dengan box model, kita bisa mengontrol spacing secara presisi.
            Padding untuk ruang dalam, margin untuk ruang luar.
          </p>
          <button class="button">Learn More</button>
        </div>

        <div class="card">
          <h2 class="card-title">Border Effects</h2>
          <p class="card-text">
            Border tidak hanya garis biasa. Kita bisa membuat rounded corners,
            shadow, dan berbagai efek visual menarik.
          </p>
          <button class="button">Explore</button>
        </div>
      </div>

      <div class="info-box">
        <strong>💡 Tips:</strong> Gunakan box-sizing: border-box untuk sizing
        yang lebih predictable!
      </div>

      <div class="warning-box">
        <strong>⚠️ Perhatian:</strong> Margin vertikal bisa collapse. Pahami
        konsep margin collapsing.
      </div>

      <div class="spacing-demo">
        <h3>Demo Spacing</h3>
        <div class="inner-box">
          Box dengan margin, padding, dan border yang jelas
        </div>
      </div>
    </div>
  </body>
</html>

Responsive Box Model

.responsive-card {
  /* Mobile first */
  padding: 16px;
  margin: 10px;
}

@media (min-width: 768px) {
  .responsive-card {
    padding: 24px;
    margin: 20px;
  }
}

@media (min-width: 1024px) {
  .responsive-card {
    padding: 32px;
    margin: 30px auto;
    max-width: 800px;
  }
}

Debug Box Model

/* Temporary border untuk debug */
.debug {
  border: 1px solid red !important;
}

/* Outline tidak mempengaruhi layout */
.debug-outline {
  outline: 2px solid blue;
}

/* Background color untuk melihat area */
.debug-bg {
  background-color: rgba(255, 0, 0, 0.1);
}

Common Patterns

Equal Height Cards

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1; /* Equal width */
  padding: 20px;
  border: 1px solid #ddd;
}

Consistent Spacing

.content > * + * {
  margin-top: 1rem; /* Space between siblings */
}

Button Spacing

.button {
  padding: 0.75rem 1.5rem; /* 12px 24px */
  margin: 0.5rem; /* 8px */
}

Best Practices

  1. Gunakan box-sizing: border-box untuk semua element
  2. Konsisten dalam spacing - gunakan scale (8px, 16px, 24px, 32px)
  3. Avoid fixed heights kecuali memang diperlukan
  4. Mobile first dalam responsive design
  5. Test di berbagai screen size untuk memastikan spacing masih ok

Tools untuk Debug

  1. Browser DevTools - Inspect element dan lihat box model
  2. CSS Pesticide - Extension untuk melihat outline semua element
  3. What Font - Extension untuk melihat font dan spacing

Latihan

Coba buat:

  1. Card layout dengan spacing yang konsisten
  2. Navigation bar dengan padding yang tepat
  3. Article layout dengan margin yang baik untuk readability

Kesimpulan

Box Model adalah fondasi layout CSS. Dengan memahami:

  • Content, padding, border, margin
  • Box-sizing property
  • Width/height calculation
  • Responsive spacing

Anda akan bisa membuat layout yang konsisten, predictable, dan responsive.

Selanjutnya kita akan mempelajari Display dan Position untuk layout yang lebih kompleks!