אלמנטים מסוג Block לעומת Inline

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 54 מתוך 76.

ב-HTML, רכיבים מסווגים כרכיבים ברמת בלוק או בתוך השורה, בהתאם לאופן שבו הם מוצגים בדף. הבנת ההבדל בין שני סוגי הרכיבים האלה חיונית ליצירת פריסות מובנות היטב ומושכות מבחינה חזותית. בואו נבחן את המאפיינים ואת ההתנהגויות של רכיבים ברמת בלוק ושל רכיבים בתוך השורה.

רכיבים ברמת בלוק

רכיב ברמת בלוק תמיד מתחיל בשורה חדשה ותופס את כל הרוחב הזמין, תוך התרחבות שמאלה וימינה ככל האפשר. הוא יוצר "בלוק" של תוכן.

דוגמאות לרכיבים ברמת הבלוק כוללות:

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

רכיבים בשורה

אלמנט מוטבע אינו מתחיל בשורה חדשה ותופס רק את הרוחב הנחוץ כדי להכיל את התוכן שלו. הוא מאפשר לאלמנטים מוטבעים לזרום בתוך שורת טקסט או בתוך אלמנט ברמת בלוק.

דוגמאות לרכיבים בתוך השורה כוללות:

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

אתגר

קל

ניתן לך מסמך HTML עם מגוון רכיבים. המשימה שלך היא לזהות אילו רכיבים הם ברמת בלוק ואילו הם רכיבים שורתיים, ואז להחיל CSS בסיסי כדי להדגיש את ההבדלים. פעל לפי השלבים הבאים:

כתוב כלל CSS שמכוון לכל הרכיבים ברמת בלוק (div, p, h1). הגדר את background-color לערך lightgray והוסף border בערך 1px solid blue.
כתוב כלל CSS שמכוון לכל הרכיבים השורתיים (span, a, img). הגדר את background-color לערך lightyellow והוסף border בערך 1px solid red.

שים לב כיצד הרכיבים ברמת בלוק תופסים את כל הרוחב הזמין ומתחילים בשורות חדשות, בעוד שהרכיבים השורתיים תופסים רק את המקום הנחוץ להם ומשתלבים בתוך השורה.

נסו בעצמכם

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