[Marcador] CSS: uso de sangría y sangría

Tipos de distancia CSS

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

▍ Propiedad de margen - Sangría

▍ Contraer el acolchado exterior

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

• Agregar una propiedad borderal elemento padre.
• Establecer la propiedad de un displayelemento hijo en un valor inline-block.

▍ Sangría negativa

.parent {
    padding: 1rem
}

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

▍ Propiedad de relleno - relleno interno

▍ Situaciones en las que la propiedad de relleno no funciona

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

Espacio entre elementos de diseño de cuadrícula 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;
}

El espacio entre elementos CSS de un diseño de Flexbox

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

Elementos de posicionamiento en CSS

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

Escenarios de uso y estudios de casos

▍ Componente de encabezado

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

• Establecer el ancho mínimo para los elementos de navegación.
• Aumenta la sangría horizontal.
• Agrega una sangría adicional en el lado izquierdo del separador.

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

▍ Distancias en diseños de cuadrícula - 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;
}

• Establezca la propiedad del elemento de cuadrícula padding-left.
• Configure el elemento padre para que tenga un margen externo negativo margin-leftcon el mismo valor que 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;
}

▍Distancia en diseños de cuadrícula - CSS Grid

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

▍ Establecer distancia entre elementos solo cuando sea necesario

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

▍Trabajar con sangría externa inferior

Solución # 1: selector CSS: no

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

Solución No. 2: una combinación de elementos vecinos del mismo nivel.

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

Análisis de decisión

• Conduce a problemas específicos de CSS. No se puede redefinir hasta que se use un selector :not.
• No se aplica cuando hay más de una columna de elementos. Esto se ilustra a continuación.

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

▍ Tarjeta de componente

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

▍ Contenido de artículos

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

▍ Sangría externa, según corresponda

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

▍ Modo de escritura de propiedad CSS

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

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

Encapsulación de componentes

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

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

▍Uso de componentes abstraídos

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

Componentes utilizados como separadores

• La sangría externa no debe configurarse directamente en el componente, ya que forma parte de un sistema de diseño ya creado.
• La sangría debe ser flexible. En una página puede tener un tamaño X, y en la otra, un tamaño Y.

▍ Problemas del componente separador

• ¿Cómo un componente separador ocupa espacio en un componente padre? ¿Cómo se comporta en diseños horizontales y verticales? Por ejemplo, ¿cómo separaría un componente tales componentes vertical y horizontalmente?
• ¿Necesito displaydiseñar estos componentes en función de la propiedad del componente principal (Flexbox, Grid)?

▍ Tamaños de componentes separadores

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

▍Uso de pseudoelementos

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

Funciones matemáticas CSS min (), max (), clamp ()

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

Resumen