ميّز العناصر الكتلية من العناصر السطرية وتعلّم التقنيات الكلاسيكية لتوسيط عنصر.
افتح هذا الدرس في Kodokonكيف ترتّب الصناديق نفسها على الصفحة؟ كل شيء يتوقّف على نمط عرضها، الذي تتحكّم به خاصية display. يتصرّف العنصر الكتلي كطوبة: يشغل كامل العرض المتاح ويدفع العنصر التالي إلى سطر جديد. العناوين <h1> والفقرات <p> ووسوم <div> (صناديق عامة بلا معنى خاص) هي كتلية افتراضيًا. أما العنصر السطري فيتصرّف ككلمة في جملة: يشغل مساحة محتواه فقط ويجلس بجانب جيرانه. الروابط <a> ووسوم <span> (النظير السطري لـ <div>) هي سطرية افتراضيًا.
<p>A paragraph: I take up the full width.</p>
<p>Me too, so I start on a new line.</p>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<span>A span, also on the same line.</span>تتيح لك خاصية display تغيير هذا السلوك: display: block; على رابط يجعله يشغل كامل العرض، وdisplay: inline; على <div> يجعله يتدفّق ضمن النص. انتبه إلى قيد مهم في العناصر السطرية: خاصيتا width وheight تُتجاهَلان عليها. لكي تُحدِّد حجم عنصر، يجب أن يكون كتليًا.
a {
display: block;
width: 200px;
background-color: lightblue;
}لننتقل إلى التوسيط، السؤال الذي يطرحه كل مبتدئ. الحالة الأولى: توسيط النص داخل صندوق. تُطبَّق خاصية text-align: center; على الحاوية وتوسّط محتواها السطري (النص والروابط والصور). الحالة الثانية: توسيط صندوق كتلي بأكمله، مثل بطاقة في منتصف الصفحة. التقنية الكلاسيكية: امنح الصندوق عرضًا، ثم اكتب margin: 0 auto;. تطلب القيمة auto من المتصفح أن يحسب الهامشين الأيسر والأيمن بنفسه: يجعلهما متساويين، ما يوسّط الصندوق.
.card {
width: 300px;
margin: 0 auto;
text-align: center;
border: 1px solid gray;
padding: 16px;
}لنلخّص ما تعلّمته في هذه الوحدة: أنت تعرف كيف تربط ملف CSS، وتكتب قواعد بمُحدِّدات وخصائص وقيم، وتستهدف العناصر بالوسم أو الفئة أو المعرّف، وتوازن بين الحشو والحدّ والهامش، وتنسّق النص، والآن ترتّب الصناديق وتوسّطها. بهذه الأسس، يمكنك بالفعل بناء صفحة ويب بسيطة ومصقولة. ستقدّم لك الوحدة التالية أدوات تخطيط أقوى.
width: 200px; أي تأثير على <span> افتراضيًا؟