Blok ve Satır İçi Öğeler

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 54 / 76.

HTML'de öğeler, sayfada nasıl görüntülendiklerine bağlı olarak blok düzeyi veya satır içi öğeler olarak kategorize edilir. Bu iki öğe türü arasındaki farkı anlamak, iyi yapılandırılmış ve görsel olarak çekici düzenler oluşturmak için çok önemlidir. Blok düzeyi ve satır içi öğelerin özelliklerini ve davranışlarını inceleyelim.

Blok Seviyeli Öğeler

Blok düzeyi bir öğe her zaman yeni bir satırdan başlar ve mevcut tüm genişliği kaplayarak mümkün olduğunca sola ve sağa doğru uzanır. Bir içerik "bloğu" oluşturur.

Blok düzeyi öğe örnekleri şunları içerir:

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

Satır İçi Öğeler

Satır içi bir öğe yeni bir satırda başlamaz ve içeriğine sığacak kadar genişlik kaplar. Satır içi öğelerin bir metin satırı içinde veya blok düzeyindeki bir öğenin içinde akmasına olanak tanır.

Satır içi öğelere örnekler şunlardır:

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

Görev

Kolay

Çeşitli öğeler içeren bir HTML belgeniz var. Göreviniz, hangi öğelerin blok düzeyinde, hangilerinin satır içi olduğunu belirlemek ve ardından farklılıkları vurgulamak için bazı temel CSS uygulamaktır. Aşağıdaki adımları izleyin:

Tüm blok düzeyi öğeleri (div, p, h1) hedefleyen bir CSS kuralı yazın. background-color değerlerini lightgray olarak ayarlayın ve 1px solid blue değerinde bir border ekleyin.
Tüm satır içi öğeleri (span, a, img) hedefleyen bir CSS kuralı yazın. background-color değerlerini lightyellow olarak ayarlayın ve 1px solid red değerinde bir border ekleyin.

Blok düzeyi öğelerin kullanılabilir genişliğin tamamını kapladığını ve yeni satırlarda başladığını, satır içi öğelerin ise yalnızca gerektiği kadar yer kapladığını ve satır içinde akışını sürdürdüğünü gözlemleyin.

Kendin dene

<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>