Margen Css
Así que ahora tienes tu página y todo tu texto con estilo y formato de la manera que quieres. Ahora es el momento de empezar a dar espacio a partes de tu página para respirar, espaciándolas con márgenes y relleno. A partir de ahora, podrás espaciar todas las partes de tu página hasta el píxel.
El modelo de caja es un concepto muy importante, que debes tener en tu cabeza antes de empezar a abordar todo esto del espaciado. Todos los elementos HTML a nivel de bloque tienen cinco propiedades de espaciado: altura, anchura, margen, borde y relleno. Al hablar de estos atributos necesitarás un diagrama para ver de qué parte del espaciado estamos hablando. Echa un vistazo al siguiente diagrama y comprueba las tres áreas que rodean a cada elemento de la página a nivel de bloque. Juntos, forman la caja que ocupa el elemento.
Los bordes CSS se tratan en otro tutorial. Como puedes ver, los márgenes establecen el espaciado hacia afuera, y el padding hacia adentro. Si los márgenes, los bordes y el relleno estuvieran todos a 0 de ancho, la caja quedaría justo alrededor del elemento. Puedes controlar cada una de las tres variables de espaciado de forma independiente.
Espacio Html entre elementos
Si dos o más elementos están cerca, el usuario asumirá que, de alguna manera, pertenecen el uno al otro. Cuando se agrupan varios elementos de diseño, el usuario puede decidir cómo se relacionan entre sí por la cantidad de espacio entre ellos. Sin espacio, será difícil para un usuario hojear una página y saber qué elementos están relacionados y cuáles no.
El espaciado en CSS tiene dos tipos, uno que está fuera de un elemento, y el otro está dentro de él. Para este artículo, los llamaré exterior e interior. Supongamos que tenemos un elemento, el espaciado dentro de él es interno, y el espaciado fuera de él es un espaciado externo.
He utilizado padding para el espaciado interior, y margin para el exterior. Bastante simple, ¿no? Sin embargo, esto puede volverse más y más complejo cuando se trata de componentes que tienen muchos detalles y elementos hijos.
En palabras sencillas, el colapso del margen ocurre cuando dos elementos verticales tienen un margen, y uno de ellos tiene un margen mayor que el otro. En ese caso, se utilizará el margen mayor y se ignorará el otro.
Relleno Css
El valor de border-spacing también se utiliza a lo largo del borde exterior de la tabla, donde la distancia entre el borde de la tabla y las celdas de la primera/última columna o fila es la suma del border-spacing relevante (horizontal o vertical) y el padding relevante (superior, derecho, inferior o izquierdo) de la tabla.
Nota: La propiedad border-spacing es equivalente al atributo cellspacing <table>, ya obsoleto, salvo que tiene un segundo valor opcional que puede utilizarse para establecer un espaciado horizontal y vertical diferente.
Css espacio entre el texto
padding-bottom: 24rem;pt-96padding-top: 24rem;pr-96padding-right: 24rem;pb-96padding-bottom: 24rem;pl-96padding-left: 24rem;Show all classesBasic usageAdd padding to a single sideControl the padding on one side of an element using the p{t|r|b|l}-{size} utilities. For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.
<div class=»p-8 …»>p-8</div>Applying conditionallyHover, focus, and other statesTailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:py-8 to only apply the py-8 utility on hover.<div class=»py-4 hover:py-8″>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.Breakpoints and media queriesYou can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:py-8 to apply the py-8 utility at only medium screen sizes and above.<div class=»py-4 md:py-8″>