[Bookmark] CSS: Usando recuo e recuo

Tipos de distância CSS

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

Property Propriedade da margem - recuo

▍ Recolher o preenchimento externo

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

• Adicionando uma propriedade borderao elemento pai.
• Configurando a propriedade de um displayelemento filho para um valor inline-block.

Ind Recuo negativo

.parent {
    padding: 1rem
}

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

PropertyPadding padding - padding interno

▍ Situações em que a propriedade padding não funciona

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

Espaço entre elementos de layout de grade 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;
}

O espaço entre elementos CSS de um layout Flexbox

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

Elementos de posicionamento em CSS

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

Usar cenários e estudos de caso

▍ Componente de cabeçalho

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

• Configurando a largura mínima para itens de navegação.
• Aumente o recuo horizontal.
• Adiciona um recuo extra no lado esquerdo do separador.

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

▍ Distâncias nos layouts de grade - 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;
}

• Defina a propriedade do item de grade padding-left.
• Defina o elemento pai para ter uma margem externa negativa margin-leftcom o mesmo 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;
}

▍Distância nos layouts de grade - CSS Grid

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

▍Definir a distância entre os elementos somente quando necessário

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

OrkTrabalho com recuo externo inferior

Solução 1: seletor de CSS: não

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

Solução nº 2: uma combinação de elementos vizinhos do mesmo nível

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

Análise de decisão

• Isso leva a problemas específicos de CSS. Não pode ser redefinido até que um seletor seja usado :not.
• Não se aplica quando há mais de uma coluna de itens. Isso é ilustrado abaixo.

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

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

▍ Conteúdo dos artigos

<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 Recuo externo, conforme aplicável

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

Modo de gravação da propriedade CSS

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

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

Encapsulamento de componentes

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

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

SingUsando componentes abstratos

<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 usados ​​como separadores

• O recuo externo não deve ser configurado diretamente no componente, pois faz parte de um sistema de design já criado.
• O recuo deve ser flexível. Em uma página pode ter um tamanho Xe, por outro - um tamanho Y.

Issues Problemas do componente separador

• Como um componente separador ocupa espaço em um componente pai? Como ele se comporta nos layouts horizontais e verticais? Por exemplo, como esse componente separaria os componentes vertical e horizontalmente?
• Preciso estilizar esses componentes com base na propriedade displaydo componente pai (Flexbox, Grid)?

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

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

Funções matemáticas CSS min (), max (), clamp ()

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

Sumário