[وضع إشارة مرجعية] CSS: استخدام المسافة البادئة والمسافات البادئة

أنواع مسافة CSS

.element {
    padding: 1rem;
    margin-bottom: 1rem;
}

Property خاصية الهامش - مسافة بادئة

▍ انهيار الحشو الخارجي

.element:not(:last-child) {
    margin-bottom: 1rem;
}

<div class="parent">
  <div class="child">I'm the child element</div>
</div>

.parent {
  margin: 50px auto 0 auto;
  width: 400px;
  height: 120px;
}

.child {
  margin: 50px 0;
}

• إضافة خاصية borderللعنصر الأصلي.
• تعيين خاصية displayعنصر تابع إلى قيمة inline-block.

ent مسافة بادئة سلبية

.parent {
    padding: 1rem
}

.child {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
}

property خاصية الحشو - الحشو الداخلي

▍ الحالات التي لا تعمل فيها خاصية الحشو

.element span {
    display: inline-block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

مسافة بين عناصر تخطيط شبكة CSS

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px; /*    16px     */
}

.element {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 24px;
    grid-column-gap: 16px;
}

المسافة بين عناصر CSS لتخطيط Flexbox

.element {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

عناصر التموضع في CSS

.category {
    position: absolute;
    left: 16px;
    top: 16px;
}

استخدم السيناريوهات ودراسات الحالة

component مكون الرأس

<header class="c-header">
  <h1 class="c-logo"><a href="#">Logo</a></h1>
  <div class="c-header__nav">
    <nav class="c-nav">
      <ul>
        <li><a href="#">...</a></li>
      </ul>
    </nav>
    <a href="#" class="c-user">
      <span>Ahmad</span>
      <img class="c-avatar" src="shadeed.jpg" alt="">
    </a>
  </div>
</header>

.c-header {
    padding-left: 16px;
    padding-right: 16px;
}

.c-nav a {
    display: block;
    padding: 16px 8px;
}

.c-nav li {
    /*     ,     */
    display: inline-block;
}

.c-user img,
.c-user span {
    margin-left: 10px;
}

.c-user img,
.c-user span {
    margin-inline-start: 1rem;
}

• تعيين الحد الأدنى لعرض عناصر التنقل.
• زيادة المسافة البادئة الأفقية.
• يضيف مسافة بادئة إضافية على الجانب الأيسر من الفاصل.

.c-user {
    margin-left: 8px;
}

▍ المسافات في تخطيطات الشبكة - CSS Flexbox

<div class="wrapper">
    <div class="grid grid--4">
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <div class="grid__item">
              <article class="card"><!--   --></article>
        </div>
        <!--   .. -->
    </div>
</div>

.grid--4 {
    display: flex;
    flex-wrap: wrap;
}

.grid__item {
    flex-basis: 25%;
    margin-bottom: 16px;
}

.grid__item {
    flex-basis: calc(25% - 10px);
    margin-left: 10px;
    margin-bottom: 16px;
}

• قم بتعيين خاصية عنصر الشبكة padding-left.
• قم بتعيين العنصر الأصل بحيث يكون له هامش خارجي سلبي margin-leftبنفس قيمة y padding-left.

.grid--4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
}

.grid__item {
    flex-basis: 25%;
    padding-left: 10px;
    margin-bottom: 16px;
}

.wrapper {
    margin-left: -4px;
    margin-right: -4px;
}

.story {
    padding-left: 4px;
    padding-right: 4px;
}

istanceالمسافة في تخطيطات الشبكة - CSS Grid

.grid--4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

distance تحديد المسافة بين العناصر عند الضرورة فقط

.card:not(:last-child) {
    margin-bottom: 16px;
}

@media (min-width: 700px) {
    .card:not(:last-child) {
        margin-bottom: 0;
        margin-left: 1rem;
    }
}

.card-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 700px) {
    .card-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

with العمل مع المسافة البادئة الخارجية السفلية

الحل # 1: محدد CSS: لا

.element:not(:last-child) {
    margin-bottom: 16px;
}

الحل رقم 2: مزيج من العناصر المجاورة من نفس المستوى

.element + .element {
    margin-top: 16px;
}

تحليل القرار

• أنه يؤدي إلى قضايا محددة CSS. لا يمكن إعادة تعريفه حتى يتم استخدام محدد :not.
• لا تنطبق عندما يكون هناك أكثر من عمود واحد من العناصر. هذا موضح أدناه.

.wrapper {
    margin-bottom: -16px;
}

Card بطاقة المكون

<article class="card">
    <a href="#">
      <div class="card__thumb"><img src="food.jpg" alt=""></div>
      <div class="card__content">
        <h3 class="card__title">Cinnamon Rolls</font></h3>
        <p class="card__author">Chef Ahmad</p>
        <div class="card__rating"><span>4.9</span></div>
        <div class="card__meta"><!-- --></div>
      </div>
    </a>
</article>

.card__content {
    padding: 10px;
}

.card__title,
.card__author,
.card__rating {
  margin-bottom: 10px;
}

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
}

.card__meta {
    padding-top: 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

.card__meta {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #e9e9e9;
    margin: 0 -10px;
}

▍ محتوى المقالات

<div class="wrapper">
  <h1>Spacing Elements in CSS</h1>
  <p><!-- content --></p>
  <h2><font color="#3AC1EF">Types of Spacing</font></h2>
  <img src="spacing-1.png" alt="">
  <p><!-- content --></p> 
  <p><!-- content --></p> 
  <h2><font color="#3AC1EF">Use Cases</font></h2>
  <p><!-- content --></p> 
  <h3><font color="#3AC1EF">▍Card Component</font></h3> 
  <img src="use-case-card-2.png" alt="">
</div>

h1, h2, h3, h4, h5 {
  margin: 2.75rem 0 1.05rem;
}

h1 {
  margin-top: 0;
}

img {
  margin-bottom: 0.5rem;
}

ind المسافة البادئة الخارجية ، حسب الاقتضاء

.element {
    display: flex;
    flex-wrap: wrap;
}

writing وضع كتابة خاصية CSS

.wrapper {
    /*              */
    display: flex;
}

.title {
    writing-mode: vertical-lr;
    margin-right: 16px;
}

تغليف المكونات

<button class="button">Save Changes</button>
<button class="button button-outline">Discard</button>

.button + .button {
    margin-left: 1rem;
}

components استخدام مكونات مجردة

<div class="list">
    <div class="list__item">
        <button class="button">Save Changes</button>
    </div>
    <div class="list__item">
        <button class="button button-outline">Discard</button>
    </div>
</div>

.list {
    display: flex;
    align-items: center;
    margin-left: -1rem; /*       */
}

.list__item {
    margin-left: 1rem;
}

<List>
  <Button>Save Changes</Button>
  <Button outline>Discard</Button>
</List>

المكونات المستخدمة كفواصل

• لا يجب تكوين المسافة البادئة الخارجية مباشرةً في المكون ، نظرًا لأنها جزء من نظام تصميم تم إنشاؤه بالفعل.
• يجب أن تكون المسافة البادئة مرنة. في صفحة واحدة يمكن أن يكون لها حجم X، وفي الأخرى - حجم Y.

component مشكلات مكون الفاصل

• كيف يشغل مكون الفاصل مساحة في المكون الرئيسي؟ كيف يتصرف في المخططات الأفقية والرأسية؟ على سبيل المثال ، كيف سيفصل هذا المكون المكونات عموديا وأفقيا؟
• هل أحتاج إلى تصميم هذه المكونات بناءً على خاصية displayالمكون الأصلي (Flexbox ، Grid)؟

▍ أحجام مكونات الفاصل

<Header />
<Spacer mb={4} />
<Section />

<Flex>
  <Logo />
  <Spacer m="auto" />
  <Link>Beep</Link>
  <Link>Boop</Link>
</Flex>

<Flex>
  <Logo />
  <Link>Beep</Link>
  <Link>Boop</Link>
  <Spacer m="auto" />
  <Link>Boop</Link>
</Flex>

<Flex>
  <Spacer grow="1" />
</Flex>

▍ استخدام العناصر الزائفة

.element:after {
    content: "";
    display: block;
    height: 32px;
}

<Header spacer="below" type="pseudo" length="32">
  <Logo />
  <Link>Home</Link>
  <Link>About</Link>
  <Link>Contact</Link>
</Header>

وظائف CSS للرياضيات min () ، max () ، clamp ()

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: min(2vmax, 32px);
}

ملخص