1. Display: Block
التعريف: العنصر الذي يُطبق عليه display: block يُعتبر عنصر كتلي، ويحتل المساحة الأفقية الكاملة لعنصره الأب.
الخصائص:
- يبدأ في سطر جديد.
- يأخذ العرض الكامل للعنصر الأب.
- يمكن تعيين العرض (
width) والارتفاع (height). - يمكن تعيين الهوامش (
margin) والحشو (padding).
أمثلة على عناصر كتلية:
<div><p><h1>إلى<h6><ul>و<ol>
مثال: html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Block Example</title>
<style>
.block {
display: block;
background-color: lightblue;
margin: 10px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="block">This is a block element.</div>
<div class="block">This is another block element.</div>
</body>
</html>
2. Display: Inline
التعريف: العنصر الذي يُطبق عليه display: inline يُعتبر عنصر ضمني، ويحتل فقط المساحة التي تتطلبها محتوياته.
الخصائص:
- لا يبدأ في سطر جديد.
- يأخذ فقط العرض الذي يحتاجه.
- لا يمكن تعيين العرض (
width) والارتفاع (height). - يمكن تعيين الهوامش (
margin) والحشو (padding)، ولكن الهوامش العمودية (topوbottom) لا تؤثر على المساحة الفعلية.
أمثلة على عناصر ضمنية:
<span><a><img><strong>و<em>
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline Example</title>
<style>
.inline {
display: inline;
background-color: lightcoral;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<span class="inline">This is an inline element.</span>
<span class="inline">This is another inline element.</span>
</body>
</html>
3. Display: Inline-Block
التعريف: العنصر الذي يُطبق عليه display: inline-block يجمع بين خصائص العنصر الكتلي والضمني. يأخذ فقط المساحة التي يحتاجها، لكنه يسمح بتعيين العرض والارتفاع.
الخصائص:
- لا يبدأ في سطر جديد.
- يأخذ فقط العرض الذي يحتاجه.
- يمكن تعيين العرض (
width) والارتفاع (height). - يمكن تعيين الهوامش (
margin) والحشو (padding).
أمثلة على استخدامات: يمكن استخدام display: inline-block لتنسيق العناصر بشكل مرن داخل نفس السطر، مثل القوائم الأفقية أو الصور المصغرة.
مثال:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Inline-Block Example</title>
<style>
.inline-block {
display: inline-block;
background-color: lightgreen;
width: 100px;
height: 50px;
margin: 5px;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>
</body>
</html>
