انضم لمجتمعنا

شرح مفصل عن خاصية display في CSS: Block, Inline-Block, Inline

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>

اترك ردّاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *