[Lesezeichen] CSS: Verwenden von Einrückung und Einrückung

CSS-Entfernungstypen

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

▍ Margin Property - Einzug

▍ Außenpolsterung reduzieren

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

• Hinzufügen einer Eigenschaft borderzum übergeordneten Element.
• Festlegen der Eigenschaft eines displayuntergeordneten Elements auf einen Wert inline-block.

▍ Negativer Einzug

.parent {
    padding: 1rem
}

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

▍Padding-Eigenschaft - innere Polsterung

▍ Situationen, in denen die Polsterungseigenschaft nicht funktioniert

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

Abstand zwischen CSS-Rasterlayoutelementen

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

Der Abstand zwischen CSS-Elementen eines Flexbox-Layouts

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

Positionierungselemente in CSS

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

Verwenden Sie Szenarien und Fallstudien

▍ Header-Komponente

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

• Festlegen der Mindestbreite für Navigationselemente.
• Erhöhen Sie die horizontale Einkerbung.
• Fügt einen zusätzlichen Einzug auf der linken Seite des Trennzeichens hinzu.

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

▍ Abstände in Rasterlayouts - 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;
}

• Legen Sie die Eigenschaft des Rasterelements fest padding-left.
• Stellen Sie das übergeordnete Element so ein, dass es einen negativen äußeren Rand margin-leftmit demselben Wert wie y hat 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;
}

▍Entfernung in Rasterlayouts - CSS-Raster

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

▍Stellen Sie den Abstand zwischen den Elementen nur bei Bedarf ein

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

▍Arbeit mit unterer äußerer Einkerbung

Lösung 1: CSS-Auswahl: nicht

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

Lösung Nr. 2: eine Kombination benachbarter Elemente derselben Ebene

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

Entscheidungsanalyse

• Dies führt zu CSS-spezifischen Problemen. Sie kann erst neu definiert werden, wenn ein Selektor verwendet wird :not.
• Sie gilt nicht, wenn mehr als eine Spalte mit Elementen vorhanden ist. Dies ist unten dargestellt.

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

▍ Komponentenkarte

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

▍ Inhalt der 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;
}

▍ Externe Einrückung, falls zutreffend

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

▍CSS-Eigenschaftsschreibmodus

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

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

Komponentenverkapselung

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

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

▍Verwenden von abstrahierten Komponenten

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

Als Trennzeichen verwendete Komponenten

• Externe Einrückungen sollten nicht direkt an der Komponente konfiguriert werden, da sie Teil eines bereits erstellten Entwurfssystems sind.
• Die Einrückung muss flexibel sein. Auf einer Seite kann es eine Größe haben X, auf der anderen eine Größe Y.

▍ Probleme mit der Separator-Komponente

• Wie nimmt eine Trennkomponente Platz in einer übergeordneten Komponente ein? Wie verhält er sich in horizontalen und vertikalen Layouts? Wie würde eine solche Komponente beispielsweise Komponenten vertikal und horizontal trennen?
• Muss ich diese Komponenten basierend auf der Eigenschaft displayder übergeordneten Komponente (Flexbox, Grid) formatieren?

▍Größen der Abscheiderkomponenten

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

▍Verwendung von Pseudoelementen

.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-Mathematikfunktionen min (), max (), clamp ()

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

Zusammenfassung