هوامش وحشو CSS

<style>
.box {
  padding: 20px;  /* 20px من جميع الجوانب */
  background: #fff3e0;
  border: 1px solid #ffb74d;
}
</style>
<div class="box">حشو 20px يُنشئ مسافة بين المحتوى والحدود</div>

<style>
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  background: #fce4ec;
  border: 1px solid #e91e63;
}
</style>
<div class="box">حشو مختلف: أعلى 10px، يمين 20px، أسفل 30px، يسار 40px</div>

/* قيمة واحدة: جميع الجوانب متساوية */
padding: 20px;

/* قيمتان: أعلى+أسفل، يمين+يسار */
padding: 10px 20px;

/* ثلاث قيم: أعلى، يمين+يسار، أسفل */
padding: 10px 20px 30px;

/* أربع قيم: أعلى، يمين، أسفل، يسار (مع عقارب الساعة) */
padding: 10px 20px 30px 40px;

<style>
/* إضافة حشو للزر لقابلية نقر أفضل */
.button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
}

/* فراغ محتوى البطاقة */
.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

/* منطقة نقر عنصر التنقل */
.nav-item {
  padding: 10px 16px;
  background: #e8eaf6;
  display: inline-block;
}
</style>
<button class="button">زر</button>
<div class="card">محتوى البطاقة مع مسافة مريحة من الحدود</div>
<nav class="nav-item">عنصر تنقل</nav>

<style>
.box {
  margin: 20px;  /* 20px من جميع الجوانب */
  background: #e8f5e9;
  border: 1px solid #66bb6a;
  padding: 10px;
}
</style>
<div class="box">هامش 20px يُبقي مسافة 20px من العناصر الأخرى</div>

margin: 20px;            /* جميع الجوانب متساوية */
margin: 10px 20px;       /* أعلى+أسفل، يمين+يسار */
margin: 10px 20px 30px;  /* أعلى، يمين+يسار، أسفل */
margin: 10px 20px 30px 40px; /* أعلى، يمين، أسفل، يسار */

<style>
/* توسيط حاوية */
.container {
  width: 1200px;
  margin: 0 auto;   /* توسيط أفقي */
  background: #e3f2fd;
  padding: 10px;
}

/* مسافة بين العناصر */
.box {
  margin-bottom: 20px;
}

/* مسافة تحت العناوين */
h1 {
  margin-bottom: 16px;
}
</style>
<div class="container">عنصر حاوية مع عناصر أبناء بداخلها</div>
<div class="box">عنصر صندوق يوضح تنسيق نموذج الصندوق</div>
<h1>عنوان المستوى الأول</h1>

<style>
.box {
  width: 400px;      /* يجب تحديد العرض */
  margin: 0 auto;    /* توسيط أفقي */
}
</style>
<div class="box">عنصر صندوق يوضح تنسيق نموذج الصندوق</div>

<style>
.box1 {
  margin-bottom: 30px;
}
.box2 {
  margin-top: 20px;
}
/* المسافة الفعلية 30px (القيمة الأكبر)، وليست 50px */
</style>
<div class="box1">صندوق 1</div>
<div class="box2">صندوق 2</div>

<style>
.parent {
  background: #eee;
  /* لا حشو أو حدود */
}
.child {
  margin-top: 20px;  /* هذا الهامش يجعل الأصل "يسقط" أيضاً */
}
</style>
<div class="parent">حاوية أصلية</div>
<div class="child">محتوى تابع</div>