[Bookmark] CSS: Menggunakan Indentasi dan Indentasi

Jenis jarak CSS

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

▍ Properti Margin - Indent

▍ Tutup bantalan luar

.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;
}

• Menambahkan properti borderke elemen induk.
• Menetapkan properti displayelemen anak ke nilai inline-block.

▍ Indentasi Negatif

.parent {
    padding: 1rem
}

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

▍ Properti Padding - bantalan dalam

▍ Situasi di mana properti padding tidak berfungsi

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

Spasi Antara Elemen Layout Kotak 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;
}

Ruang Antara Elemen CSS pada Tata Letak Flexbox

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

Elemen Posisi dalam CSS

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

Gunakan Skenario dan Studi Kasus

▍ Komponen tajuk

<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;
}

• Mengatur lebar minimum untuk item navigasi.
• Tingkatkan lekukan horisontal.
• Menambahkan indentasi tambahan di sisi kiri pemisah.

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

▍ Jarak dalam tata letak kotak - 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;
}

• Setel properti item kisi padding-left.
• Atur elemen induk untuk memiliki margin luar negatif margin-leftdengan nilai yang sama dengan 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 Jarak dalam tata letak kotak - Kotak CSS

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

▍Mengatur jarak antar elemen hanya jika perlu

.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;
    }
}

▍Bekerja dengan indentasi luar bawah

Solusi # 1: pemilih CSS: tidak

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

Solusi No. 2: kombinasi elemen tetangga dari tingkat yang sama

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

Analisis keputusan

• Ini mengarah ke masalah spesifik CSS. Itu tidak dapat didefinisikan ulang sampai pemilih digunakan :not.
• Itu tidak berlaku ketika ada lebih dari satu kolom item. Ini diilustrasikan di bawah ini.

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

▍ Kartu Komponen

<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;
}

▍ Konten artikel

<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;
}

▍ Lekukan eksternal, sebagaimana berlaku

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

Mode penulisan properti ▍CSS

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

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

Enkapsulasi komponen

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

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

▍Menggunakan komponen yang diabstraksi

<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>

Komponen Digunakan sebagai Pemisah

• Lekukan eksternal tidak boleh dikonfigurasikan secara langsung pada komponen, karena merupakan bagian dari sistem desain yang sudah dibuat.
• Lekukan harus fleksibel. Pada satu halaman dapat memiliki ukuran X, dan di sisi lain - ukuran Y.

▍ Masalah komponen pemisah

• Bagaimana komponen pemisah mengambil ruang dalam komponen induk? Bagaimana dia berperilaku dalam tata letak horizontal dan vertikal? Sebagai contoh, bagaimana komponen seperti itu memisahkan komponen secara vertikal dan horizontal?
• Apakah saya perlu menata komponen ini berdasarkan properti displaydari komponen induk (Flexbox, Grid)?

▍ Ukuran komponen pemisah

<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>

▍Gunakan elemen pseudo

.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>

Fungsi matematika CSS min (), max (), clamp ()

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

Ringkasan