por favor dame un poco de espacio trucos CSS
Hay maneras diferentes de hacer esto. Algunos son más aconsejables y más apropiados para determinadas situaciones que otros, por supuesto.
Podemos hacerlo directamente en HTML:
<p>We go from one line...<br><br> down a couple more.</p>
Pero eso es exactamente para lo que sirve CSS:
<p>We go from one line...<span>down a couple more.</span></p>
span {
display: block;
margin-block-start: 1.5rem;
}
La altura de la línea también puede darnos un respiro adicional entre líneas de texto:
p {
line-height: 1.35;
}
Como estamos hablando de un texto, hay uno letter-spacing
y word-spacing
por no mencionar text-indent
:
Pero hablemos de campos en lugar de texto. Digamos que tenemos dos divs simples:
<div>Twiddle Dee</div>
<div>Twiddle Dum</div>
Están a nivel de bloque, por lo que ya están en líneas diferentes. podemos llegar margin
O podríamos crear la impresión de un espacio con padding
Supongo que podríamos translate
estos bastardos en ambas direcciones:
div:nth-child(2) {
transform: translateY(100px);
}
Pero tal vez estos elementos estén absolutamente posicionados, por lo que podemos 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 celosía, entonces obtenemos gap
-años:
<section>
<div>Twiddle Dee</div>
<div>Twiddle Dum</div>
</section>
section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
}
Mismo trabajo con contenedor flexible:
section {
display: flex;
gap: 100px;
}
Mientras trabajamos en una red y contenedores flexibles, podríamos llamar a cualquier propiedad de alineación para generar espacio.
section {
display: flex;
align-items: space-between;
justify-content: space-between;
}
Hay tablas, por supuesto:
<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;
}
Profundicemos en el campo izquierdo. Podemos hacer que un elemento se vea como dos usando un degradado lineal con un punto de color sólido:
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%
);
}
Luego hacemos una cabeza falsa e insertamos un tope de color transparente duro entre los dos colores:
Siempre que hagamos tocino aquí, podemos agregar el viejo truco de los bordes "transparentes":
Volvamos al texto por un momento. Tal vez estamos haciendo flotar un elemento y queremos que el texto lo envuelva... con la forma de un elemento flotante, dejando un pequeño espacio entre los dos. Tenemos shape-margin
para esto:
incluso me atrevo a mencionarlo 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 grandes ideas. ¡Tenerlo!
Deja una respuesta