Por favor dame espacio | consejos CSS

Hay todo tipo de formas de hacerlo. Algunos son más recomendables y se adaptan mejor a determinadas situaciones que otros, por supuesto.

Podríamos hacerlo directamente en HTML:

<p>We go from one line...<br><br> down a couple more.</p>

Pero eso es para lo que CSS es realmente:

<p>We go from one line...<span>down a couple more.</span></p>
span {
  display: block;
  margin-block-start: 1.5rem;
}

La altura de línea también puede darnos un margen adicional entre líneas de texto:

p {
  line-height: 1.35;
}

Ya que estamos hablando de texto, también hay letter-spacing y word-spacingsin hablar de text-indent:

Pero hablemos de cuadros en lugar de texto. Supongamos que tenemos dos divs simples:

<div>Twiddle Dee</div>
<div>Twiddle Dum</div>

Estos están a nivel de bloque, por lo que ya están en líneas diferentes. podemos alcanzar margin Otra vez. O podríamos crear la sensación de espacio con padding. Supongo que podríamos translate estos retoños de ida y vuelta:

div:nth-child(2) {
  transform: translateY(100px);
}

Pero tal vez estos elementos estén absolutamente posicionados para que podamos usar compensaciones físicas:

div {
  position: absolute;
}
div:nth-child(1) {
  inset: 0;
}
div:nth-child(2) {
  inset-inline-start: 100px; /* or top: 100px; */
}

Si trabajamos en un contenedor de cuadrícula, obtenemos gap-edad:

<section>
  <div>Twiddle Dee</div>
  <div>Twiddle Dum</div>
</section>
section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

Mismo tratamiento con un envase flexible:

section {
  display: flex;
  gap: 100px;
}

Al trabajar en contenedores de cuadrícula y flexibles, podríamos recurrir a cualquier propiedad de alineación para generar espacio.

section {
  display: flex;
  align-items: space-between;
  justify-content: space-between;
}

Por supuesto, hay tablas:

<table cellspacing="100">
  <!-- etc.  -->
  <tbody>
    <tr>
      <td>Twiddle Dee</td>
      <td>Twiddle Dum</td>
    </tr>
  </tbody>
</table>

O el enfoque CSS-y:

/* We could use `display: table` if we're not working in a table element. */
table {
  border-spacing: 100px;
}

Vayamos más lejos en el campo izquierdo. Podemos hacer que un elemento se vea como dos usando un degradado lineal con una parada de color fuerte:

div {
  background-image:
    linear-gradient(
      to right,
      rgb(255 105 0 / 1) 50%,
      rgb(207 46 46 / 1) 50%,
      rgb(207 46 46 / 1) 100%
    );
}

A continuación, hacemos una cabeza falsa e insertamos un tope de color transparente duro entre los dos colores:

Mientras estemos fingiendo tocino aquí, también podríamos agregar el viejo truco del borde "transparente":

Volvamos al texto por un momento. Tal vez estamos haciendo flotar un elemento y queremos que el texto lo envuelva... con la forma del elemento flotante y dejando algo de espacio en el medio. Nosotros tenemos shape-margin para esto:

Me atrevo a mencionar el spacer.gif ¿días?

<div>Twiddle Dee</div>
<img src="https://css-tricks.com/please-give-me-some-space/spacer.gif"> <!-- 🤢 -->
<div>Twiddle Dum</div>

debe haber más

Todos ustedes son un grupo inteligente con buenas ideas. ¡Tenerlo!

Si quieres conocer otros artículos parecidos a Por favor dame espacio | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas