Elemen block vs inline

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 54 dari 76.

Dalam HTML, elemen dikelompokkan sebagai elemen tingkat blok atau sebaris, berdasarkan cara elemen tersebut ditampilkan di halaman. Memahami perbedaan antara kedua jenis elemen ini sangat penting untuk membuat tata letak yang terstruktur dengan baik dan menarik secara visual. Mari kita pelajari karakteristik dan perilaku elemen tingkat blok dan elemen sebaris.

Elemen tingkat blok

Elemen tingkat blok selalu dimulai pada baris baru dan menggunakan seluruh lebar yang tersedia, membentang sejauh mungkin ke kiri dan ke kanan. Elemen ini membuat "blok" konten.

Contoh elemen tingkat blok meliputi:

<div>
<h1> - <h6>
<p>
<ul>, <ol>, <li>
<form>
<table>
<header>, <footer>, <section>, <article>, <nav>

Elemen Inline

Elemen inline tidak dimulai pada baris baru dan hanya menggunakan lebar secukupnya untuk memuat kontennya. Elemen ini memungkinkan elemen inline mengalir di dalam baris teks atau elemen tingkat blok.

Contoh elemen sebaris meliputi:

<span>
<a>
<img>
<strong>, <em>
<input>, <button>, <label>
<textarea>

Tantangan

Mudah

Kamu diberi dokumen HTML dengan berbagai elemen. Tugasmu adalah mengidentifikasi elemen mana yang merupakan elemen tingkat blok dan mana yang merupakan elemen inline, lalu menerapkan CSS dasar untuk menyoroti perbedaannya. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan semua elemen tingkat blok (div, p, h1). Atur background-color menjadi lightgray dan tambahkan border dengan nilai 1px solid blue.
Tulis aturan CSS yang menargetkan semua elemen inline (span, a, img). Atur background-color menjadi lightyellow dan tambahkan border dengan nilai 1px solid red.

Amati bagaimana elemen tingkat blok menggunakan seluruh lebar yang tersedia dan dimulai pada baris baru, sedangkan elemen inline hanya menggunakan ruang sebanyak yang diperlukan dan mengalir di dalam baris.

Coba sendiri

<html>
<head>
    <title>Block vs Inline Elements</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a div element.</div>
    <p>This is a paragraph with a <span>span element</span> inside.</p>
    <h1>This is a heading element.</h1>
    <a href="#">This is a link</a>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image" width="100">
</body>
</html>