الخط والمسافات وBox Model

01خلي النص مريح فالقراءة

ختار Line Height مريح للقراءة وما تخليش السطور طوال بزاف. وحدة rem كتتبع حجم الخط الأساسي، غالباً 16px، ولكن المتصفح ولا المستخدم يقدرو يبدلوه.

body { font-family: system-ui, sans-serif; line-height: 1.7; }
article { max-width: 65ch; margin-inline: auto; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }

02المسافة من الداخل والخارج

Padding هي المسافة اللي داخل Border، وMargin هي اللي خارجها. مع border-box، العرض اللي كتبتي كيشمل Padding وBorder.

*, *::before, *::after { box-sizing: border-box; }
.card { width: 300px; padding: 24px; border: 1px solid; }

03استعمل مسافات متناسقة

إلا عاودتي نفس مقاسات المسافات غادي يبان الموقع منسجم. ما محتاجش Margin مختلف لكل عنصر؛ بدا بشوية ديال القيم وعدّلهم بعقل.

:root { --space-1: 8px; --space-2: 16px; --space-3: 24px; }
.card { padding: var(--space-3); }
.card p { margin-block: var(--space-2); }

04جرّب براسك

جرّب Padding بـ 8px ومن بعد 40px، وخلي عرض الكارت كيف ما هو.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.