CSS de centrado vertical. Posicionamiento absoluto y márgenes negativos. posición y margen negativo izquierdo

Al crear bloques div, probablemente te hayas encontrado con situaciones en las que necesitas centrar tu div horizontal y verticalmente usando CSS puro. Por ejemplo, al crear ventanas emergentes con . Hay varias formas de implementar el centrado y en este artículo compartiré mis formas favoritas y más sencillas, usando CSS o jQuery.

Primero, lo básico:

Centrado horizontal en CSS

Esto es fácil de hacer, usamos margen para nuestro div bloquear.

Nombre de clase( margen:0 automático; ancho:200px; alto:200px; )

Para centrar un bloque div solo horizontalmente, debe determinar el ancho del bloque (width), use la propiedad auto para márgenes izquierda y derecha. Este método funcionará para todos los elementos del bloque (div, p, h1, etc.). Para aplicar centrado horizontal a elementos en línea (enlaces, imágenes...), es necesario aplicar el parámetro mostrar:bloquear;

Centrado horizontal y vertical en CSS

Centrar un bloque div horizontal y verticalmente al mismo tiempo es un poco más complicado. Necesita conocer las dimensiones del bloque div de antemano.

Nombre de clase( ancho:300px; alto:200px; posición:absoluta; izquierda:50%; arriba:50%; margen:-100px 0 0 -150px; )

Al usar absoluto Al posicionar un bloque, podemos separarlo de los elementos circundantes y determinar su posición en relación con el tamaño de la ventana del navegador. Mueva el bloque div a 50% a la izquierda y en la parte superior de la ventana. La esquina superior izquierda del bloque ahora está en el centro de la ventana del navegador. Todo lo que queda es instalar el bloque div en el centro de la página moviéndolo a la mitad de su ancho izquierda y la mitad de su altura arriba. ¡Hurra! El resultado fue un excelente centrado de bloques utilizando código CSS puro.

Centrado horizontal y vertical con jQuery

Como se mencionó anteriormente, el método de centrado CSS solo funciona con dimensiones fijas. Si las dimensiones no están definidas, el método jQuery vendrá al rescate:

$(ventana).resize(function())( $(".className").css(( posición:"absoluta", izquierda: ($(window).width() - $(".className").outerWidth ( ))/2, arriba: ($(ventana).height() - $(".className").outerHeight())/2 )); // Para ejecutar la función cuando la ventana está cargada: $(window).resize();

El funcionamiento de este método es ejecutar la función resize() usando la línea $(ventana).redimensionar(). Esta función funciona siempre que se cambia el tamaño de la ventana del navegador. Usamos ancho exterior() Y altura exterior(), porque en contraste ancho() Y altura(), incluyen relleno y grosor del borde en el tamaño que devuelven. La última línea inicia el proceso de centrar el bloque div cuando se carga la página.

La ventaja de utilizar este método es que es posible que no sepas qué tamaño tiene el div. El principal inconveniente es que sólo funciona cuando JavaScript está habilitado. Por tanto, este método es aceptable para interfaces multifuncionales como VKontakte, Facebook, etc.

Como siempre, siéntete libre de sugerir tu método favorito para centrar bloques mediante un comentario.

En CSS, algunas cosas aparentemente simples no son tan fáciles de hacer. Una de estas cosas es la alineación, es decir. cuando un elemento necesita posicionarse de cierta manera en relación con otro.

Este artículo presenta algunas soluciones listas para usar que ayudarán a simplificar el trabajo de centrar elementos horizontal y/o verticalmente.

Nota: Debajo de cada solución hay una lista de navegadores que indican las versiones en las que funciona el código CSS especificado.

CSS - Bloque de alineación central

1. Alinear un bloque con el centro de otro. En este caso, el primer y segundo bloque tienen tamaños dinámicos.

Padre ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; -webkit-transform: traducir(-50%, -50%); -moz-transform: traducir(-50% , -50%); -ms-transformar: traducir(-50%, -50%); -o-transformar: traducir(-50%, -50%);

• Cromo 4.0+
• Firefox 3.6+
• Explorador de Internet 9+
• Ópera 10.5+
• Safari 3.1+

2. Alinear un bloque con el centro de otro. En este caso, el segundo bloque tiene dimensiones fijas.

Parent ( posición: relativa; ) .child ( posición: absoluta; izquierda: 50%; arriba: 50%; /* ancho y alto de 2 bloques */ ancho: 500px; alto: 250px; /* Los valores se determinan dependiendo en su tamaño */ /* margen-izquierda = - ancho / 2 */ margen-izquierda: -250px /* margen-top = - altura / 2 */ margen-top: -125px )

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 4.0+
• Ópera 7.0+
• Safari 1.0+

3. Alinear un bloque con el centro de otro. En este caso, el segundo bloque tiene dimensiones especificadas en porcentajes.

Parent ( posición: relativa; ) .child ( posición: absoluta; /* ancho y alto de 2 bloques en % */ alto: 50%; ancho: 50%; /* Los valores se determinan dependiendo de su tamaño en % * / izquierda: 25%; /* (100% - ancho) / 2 */ arriba: 25% /* (100% - alto) / 2 */ )

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 4.0+
• Ópera 7.0+
• Safari 1.0+

CSS - Alineación horizontal

1. Alinear un elemento de bloque (pantalla: bloque) con respecto a otro (en el que se encuentra) horizontalmente:

Bloquear (margen izquierdo: automático; margen derecho: automático;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 6.0+
• Ópera 3.5+
• Safari 1.0+

2. Alinee un elemento de línea (mostrar: inline) o bloque de líneas (mostrar: inline-block) horizontalmente:

Padre (text-align: center;) .child (display: inline-block;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 3.0+
• Explorador de Internet 8.0+
• Ópera 7.0+
• Safari 1.0+

CSS - Alineación vertical

1. Centre un elemento (display: inline, display: inline-block) con respecto al otro (en el que se encuentra) en el centro. El bloque principal en este ejemplo tiene una altura fija, que se establece mediante la propiedad line-height de CSS.

Padre (altura de línea: 500px;) .child (pantalla: bloque en línea; alineación vertical: medio;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 3.0+
• Explorador de Internet 8.0+
• Ópera 7.0+
• Safari 1.0+

2. Centrar un bloque con respecto a otro verticalmente representando al padre como una tabla y al hijo como una celda de esta tabla.

Padre (pantalla: tabla;) .child (pantalla: tabla-celda; alineación vertical: medio;)

Navegadores que admiten esta solución:

• Cromo 1.0+
• Firefox 1.0+
• Explorador de Internet 8.0+
• Ópera 7.5+
• Safari 1.0+

Si conoce otros trucos interesantes o soluciones de alineación útiles y listas para usar, compártalas en los comentarios.

Muy a menudo la tarea es alinear un bloque en el centro de la página/pantalla, y aun así sin un script Java, sin establecer dimensiones rígidas o sangrías negativas, y para que las barras de desplazamiento funcionen para el padre si el bloque excede su tamaño. . En Internet hay muchos ejemplos monótonos sobre cómo alinear un bloque con el centro de la pantalla. Como regla general, la mayoría de ellos se basan en los mismos principios.

A continuación se detallan las principales formas de resolver el problema, sus pros y sus contras. Para comprender la esencia de los ejemplos, recomiendo reducir el alto/ancho de la ventana de resultados en los ejemplos de los enlaces proporcionados.

Opción 1: sangría negativa.

Posicionamiento bloquear utilizando los atributos superior e izquierdo en un 50% y conociendo la altura y el ancho del bloque de antemano, establezca un margen negativo, que es igual a la mitad del tamaño bloquear. Una gran desventaja de esta opción es que es necesario contar las sangrías negativas. También bloquear no se comporta del todo correctamente cuando está rodeado de barras de desplazamiento; simplemente se corta porque tiene márgenes negativos.

Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 50%; izquierda : 50%; margen: -125px 0 0 -125px; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno; ) )

Opción 2. Sangría automática.

Menos común, pero similar al primero. Para bloquear Establecemos el ancho y el alto, colocamos los atributos arriba a la derecha, abajo a la izquierda en 0 y configuramos el margen automático. La ventaja de esta opción es que funcionan las barras de desplazamiento. padre, si este último tiene 100% de ancho y alto. La desventaja de este método es el ajuste rígido de las dimensiones.

Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (ancho: 250px; alto: 250px; posición: absoluta; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; margen: automático; img (ancho máximo: 100%; alto: automático; visualización: bloque; margen: 0 automático; borde: ninguno;)

Opción 3. Mesa.

preguntemos padre estilos de tabla, celda padre Establece la alineación del texto al centro. A bloquear Configuramos el modelo de bloque de líneas. Las desventajas que tenemos son las barras de desplazamiento que no funcionan y, en general, la estética de la “emulación” de tablas no es buena.

Padre ( ancho: 100%; alto: 100%; pantalla: tabla; posición: absoluta; arriba: 0; izquierda: 0; > .inner ( pantalla: tabla-celda; alineación de texto: centro; alineación vertical: medio; ) ) .block ( mostrar: bloque en línea; img ( mostrar: bloque; borde: ninguno; ) )

Para agregar un pergamino a este ejemplo, deberá agregar un elemento más al diseño.
Ejemplo: jsfiddle.net/serdidg/fk5nqh52/3.

Opción 4. Pseudoelemento.

Esta opción carece de todos los problemas enumerados en los métodos anteriores y también resuelve los problemas originales. El caso es que padre establecer estilos pseudo elemento antes, es decir, 100% de altura, alineación central y modelo de bloque en línea. Es lo mismo con bloquear Se establece un modelo de bloque de líneas, centrado. A bloquear no "cayó" bajo pseudo elemento, cuando las dimensiones del primero son mayores que padre, indicar padre espacio en blanco: nowrap y tamaño de fuente: 0, después de lo cual bloquear cancele estos estilos con lo siguiente: espacio en blanco: normal. En este ejemplo, se necesita font-size: 0 para eliminar el espacio resultante entre padre Y bloquear debido al formato del código. El espacio se puede eliminar de otras formas, pero se considera mejor simplemente evitarlo.

Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes ( altura: 100%; pantalla: bloque en línea; alineación vertical: medio; contenido: "";

O, si necesita que el padre ocupe solo el alto y el ancho de la ventana, y no toda la página:

Padre (posición: fija; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; desbordamiento: automático; espacio en blanco: nowrap; alineación de texto: centro; tamaño de fuente: 0; &:antes (altura: 100%; pantalla: bloque en línea; alineación vertical: medio; contenido: "" (pantalla: bloque; borde: ninguno;))

Opción 5. Caja flexible.

Una de las formas más sencillas y elegantes es utilizar flexbox. No requiere movimientos corporales innecesarios, describe con bastante claridad la esencia de lo que está sucediendo y es muy flexible. Lo único que vale la pena recordar al elegir este método es la compatibilidad con IE desde la versión 10 inclusive. caniuse.com/#feat=flexbox

Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; pantalla: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block (fondo: #60a839; img (pantalla: bloque; borde: ninguno;))

Opción 6. Transformar.

Adecuado si estamos limitados por la estructura y no hay forma de manipular el elemento padre, pero el bloque necesita estar alineado de alguna manera. La función CSS Translate() vendrá al rescate. Un valor de posicionamiento absoluto del 50% ubicará la esquina superior izquierda del bloque exactamente en el centro, luego un valor de traducción negativo moverá el bloque en relación con sus propias dimensiones. Tenga en cuenta que pueden aparecer efectos negativos en forma de bordes borrosos o estilo de fuente. Además, este método puede generar problemas al calcular la posición del bloque usando java-script. A veces, para compensar la pérdida del 50% del ancho debido al uso de la propiedad izquierda de CSS, se puede utilizar la regla especificada para el bloque. ayuda: margen derecho: -50%;

Padre (ancho: 100%; alto: 100%; posición: fija; arriba: 0; izquierda: 0; desbordamiento: automático;) .block (posición: absoluta; arriba: 50%; izquierda: 50%; transformar: traducir( -50%, -50%); img (pantalla: bloque;))

Opción 7. Botón.

Opción de usuario donde bloquear enmarcado en una etiqueta de botón. El botón tiene la propiedad de centrar todo lo que hay dentro de él, es decir, los elementos del modelo en línea y de bloque en línea (bloque en línea). En la práctica no recomiendo usarlo.

Padre (ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0; desbordamiento: automático; fondo: ninguno; borde: ninguno; contorno: ninguno; ) .block (display: inline-block; img (pantalla: bloque;; borde: ninguno; ) )

Prima

Usando la idea de la cuarta opción, puede establecer márgenes externos para bloquear, y este último se mostrará adecuadamente rodeado de barras de desplazamiento.
Ejemplo: jsfiddle.net/serdidg/nfqg9rza/2.

También puedes alinear la imagen al centro, y si la imagen es más grande padre, escale al tamaño padre.
Ejemplo: jsfiddle.net/serdidg/nfqg9rza/3.
Ejemplo con una imagen grande:

El artículo de hoy tiene como objetivo mostrarte cómo centrar un div, tanto horizontal como verticalmente, usando algunos trucos de CSS. También le diremos cómo centrar en toda la página o en un elemento div individual.

Centra fácilmente un elemento DIV en la página

Este método funcionará perfectamente en todos los navegadores.

CSS

Center-div (margen: 0 auto; ancho: 100px;)

Ejemplo

El valor auto en la propiedad de margen establece el margen izquierdo y derecho para todo el espacio disponible en la página. Lo importante a recordar aquí es que el elemento div centrado debe tener un valor de ancho establecido.

Centrar un DIV dentro de un elemento DIV a la antigua usanza

Este método div de alineación central funcionará en todos los navegadores.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: 0 auto; ancho: 100px;)

HTML

Ejemplo

El div exterior se puede colocar de la forma que desee, pero el div interior debe tener un ancho específico ( ancho).

Centrar un DIV dentro de un elemento DIV usando inline-block

En este método de centrar un div dentro de un div, no es necesario especificar el ancho del elemento interior. Funcionará en todos los navegadores modernos, incluido IE8.

CSS

Outer-div (relleno: 30px; alineación de texto: centro;) .inner-div (pantalla: bloque en línea; relleno: 50px;)

HTML

Ejemplo

La propiedad de alineación de texto solo funciona en elementos en línea. El valor de bloque en línea permite que el div interno se muestre como un elemento en línea y también como un bloque ( bloque en línea). La propiedad text-align en el elemento div exterior nos permitirá centrar el div interior.

Centrar un DIV dentro de un elemento DIV horizontal y verticalmente

Aquí margen: auto se usa para centrar el div en el centro de la página. El ejemplo funcionará en todos los navegadores modernos.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: automático; ancho: 100px; alto: 100px;)

HTML

Ejemplo

El elemento div interno debe tener un ancho especificado ( ancho) y altura ( altura). El método no funcionará si el elemento div exterior tiene una altura fija.

Centrar el DIV en la parte inferior de la página.

Aquí margin: auto se usa para centrar el div verticalmente y el posicionamiento absoluto se usa para el elemento exterior. El método funcionará en todos los navegadores modernos.

CSS

Outer-div ( posición: absoluta; abajo: 30px; ancho: 100%; ) .inner-div ( margen: 0 auto; ancho: 100px; alto: 100px; color de fondo: #ccc; )

HTML

Ejemplo

El div interno debe tener un ancho establecido. El espacio en la parte inferior de la página se ajusta utilizando la propiedad inferior del div exterior. También puede centrar un div en la parte superior de la página reemplazando la propiedad inferior con la propiedad superior.

Centrar DIV en la página vertical y horizontalmente

Aquí, para centrar el div, volvemos a utilizar margen: posicionamiento automático y absoluto del div exterior. El método funcionará en todos los navegadores modernos.

CSS

Center-div (posición: absoluta; margen: automático; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; ancho: 100px; alto: 100px;)

Ejemplo

El elemento div debe tener un ancho establecido ( ancho) y altura ( altura).

Realizar centrado adaptativo de un elemento DIV en la página

Aquí, para centrar el div usando CSS, hacemos que el ancho del elemento div responda para que responda a los cambios en el tamaño de la ventana. Este método funciona en todos los navegadores.

CSS

Center-div (margen: 0 automático; ancho máximo: 700px;)

Ejemplo

Un elemento div centrado debe tener establecida su propiedad de ancho máximo.

Centrar un DIV dentro de un elemento usando las propiedades del bloque interno

El elemento div interno aquí responde. Este método de centrar un div dentro de un div funcionará en todos los navegadores.

CSS

Outer-div (relleno: 30px;) .inner-div (margen: 0 auto; ancho máximo: 700px;)

HTML

Ejemplo

El div interno debe tener establecida su propiedad de ancho máximo.

Centrar dos divs receptivos uno al lado del otro

Aquí tenemos dos elementos div responsivos uno al lado del otro. Este método de colocar un div en el centro de la pantalla funcionará en todos los navegadores modernos.

CSS

Contenedor (text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) pantalla y (ancho máximo: 600 px) ( .left-div, .right-div ( lef max-width: 100%; ) )

HTML

Ejemplo

Aquí tenemos varios elementos con la propiedad inline-block aplicada, ubicados dentro de un contenedor centrado. Este ejemplo también utiliza consultas de medios CSS; es decir, si el tamaño de la pantalla es inferior a 600 píxeles, entonces la propiedad de ancho máximo para el div izquierdo y derecho se establece en 100%.

Elemento DIV centrado usando Flexbox

Aquí centramos el div CSS usando Flexbox. Su objetivo es facilitar el proceso de desarrollo de diseños de interfaz de usuario. Este módulo es compatible con Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, así como con el navegador Android 40+.

CSS

Contenedor (pantalla: flex; align-items: center; justificar-content: center; altura: 100vh;) .item (color de fondo: #f3f2ef; radio de borde: 3px; ancho: 200px; altura: 100px;)

Al diseñar una página, a menudo es necesario realizar una alineación central utilizando el método CSS: por ejemplo, centrando el bloque principal. Hay varias opciones para resolver este problema, cada una de las cuales, tarde o temprano, deberá ser utilizada por cualquier diseñador de diseño.

Alineación central del texto

A menudo, con fines decorativos, es necesario configurar el texto para que esté alineado al centro; en este caso, CSS le permite reducir el tiempo de diseño. Anteriormente, esto se hacía usando atributos HTML, pero ahora el estándar requiere que el texto se alinee usando hojas de estilo. A diferencia de los bloques, para los cuales es necesario cambiar los márgenes, en CSS, el texto centrado se realiza mediante una sola línea:

• alineación de texto:centro;

Esta propiedad se hereda y se transmite de los padres a todos los descendientes. Afecta no sólo al texto, sino también a otros elementos. Para hacer esto, deben estar en línea (por ejemplo, span) o en bloque en línea (cualquier bloque que tenga configurada la propiedad display: block). La última opción también le permite cambiar el ancho y el alto del elemento y ajustar las sangrías de manera más flexible.

A menudo, en las páginas, la alineación se asigna a la propia etiqueta. Esto invalida inmediatamente el código, ya que el W3C ha desaprobado el atributo align. No se recomienda usarlo en una página.

Alinear un bloque al centro

Si necesita centrar un div, CSS ofrece una forma bastante conveniente: usar márgenes. Se pueden establecer sangrías tanto para elementos de bloque como para elementos de bloque en línea. El valor de la propiedad debe ser 0 (relleno vertical) y auto (relleno horizontal automático):

• margen:0 automático;

Ahora esta opción se reconoce como absolutamente válida. El uso de relleno externo también le permite configurar la imagen para que esté centrada: le permite resolver muchos problemas relacionados con la posición de un elemento en la página.

Alinear un bloque hacia la izquierda o hacia la derecha

A veces no es necesaria la alineación central de CSS, pero es necesario colocar dos bloques uno al lado del otro: uno en el borde izquierdo y el otro en el derecho. Para ello existe una propiedad flotante, que puede tomar uno de tres valores: izquierda, derecha o ninguno. Digamos que tienes dos bloques que deben colocarse uno al lado del otro. Entonces el código será así:

• .izquierda (flotante: izquierda;)
• .derecha(flotante:derecha)

Si también hay un tercer bloque que debe ubicarse debajo de los dos primeros bloques (por ejemplo, un pie de página), entonces se le debe dar la propiedad clara:

• .izquierda (flotante: izquierda;)
• .derecha(flotante:derecha)
• pie de página (claro: ambos)

El hecho es que los bloques con las clases izquierda y derecha quedan fuera del flujo general, es decir, todos los demás elementos ignoran la existencia misma de elementos alineados. La propiedad clear:both permite que el pie de página o cualquier otro bloque vea elementos que se han salido del flujo y prohíbe la flotación tanto a la izquierda como a la derecha. Por lo tanto, en nuestro ejemplo, el pie de página se moverá hacia abajo.

Alineación vertical

Hay ocasiones en las que no basta con establecer la alineación central utilizando métodos CSS; también es necesario cambiar la posición vertical del bloque secundario. Cualquier elemento en línea o de bloque en línea se puede anidar en el borde superior o inferior, en el medio de un elemento principal o en cualquier ubicación. La mayoría de las veces, el bloque debe estar alineado con el centro; para ello, se utiliza el atributo de alineación vertical. Digamos que hay dos bloques, uno anidado dentro del otro. En este caso, el bloque interior es un elemento de bloque en línea (visualización: bloque en línea). Debes alinear el bloque secundario verticalmente:

• alineación superior - .child(vertical-align:top);
• alineación central - .child(vertical-align:middle);
• alineación inferior - .child(vertical-align:bottom);

Ni la alineación de texto ni la alineación vertical afectan los elementos del bloque.

Posibles problemas con bloques alineados

A veces, centrar un div usando CSS puede causar algunos problemas. Por ejemplo, cuando usamos float: digamos que hay tres bloques: .first, .first y .third. El segundo y tercer bloque se encuentran en el primero. El elemento con clase segunda está alineado a la izquierda y el último bloque está alineado a la derecha. Después de nivelarse, ambos se salieron del flujo. Si el elemento principal no tiene una altura establecida (por ejemplo, 30 em), ya no se estirará hasta la altura de sus bloques secundarios. Para evitar este error, utilice un "espaciador", un bloque especial que ve .segundo y .tercero. Código CSS:

• .segundo(flotante:izquierda)
• .tercero(flotante:derecha)
• .clearfix(altura:0; claro: ambos;)

A menudo se utiliza la pseudoclase:after, que también permite devolver los bloques a su lugar creando un pseudoespaciador (en el ejemplo, un div con la clase contenedora se encuentra dentro de.first y contiene.left y.right) :

• .izquierda(flotante:izquierda)
• .derecha(flotante:derecha)
• .contenedor: después (contenido:""; pantalla: tabla; claro: ambos;)

Las opciones anteriores son las más comunes, aunque existen varias variaciones. Siempre puedes encontrar la forma más sencilla y cómoda de crear un pseudoespaciador mediante la experimentación.

Otro problema que suelen encontrar los diseñadores de diseño es la alineación de los elementos del bloque en línea. Automáticamente se añade un espacio después de cada uno de ellos. La propiedad de margen, que tiene una sangría negativa, ayuda a solucionar este problema. Hay otros métodos que se utilizan con mucha menos frecuencia: por ejemplo, la puesta a cero. En este caso, el tamaño de fuente: 0 se escribe en las propiedades del elemento principal. Si hay texto dentro de los bloques, entonces el tamaño de fuente requerido ya se devuelve en las propiedades de los elementos del bloque en línea. Por ejemplo, tamaño de fuente: 1em. Este método no siempre es conveniente, por lo que la opción con sangrías externas se usa con mucha más frecuencia.

La alineación de bloques le permite crear páginas hermosas y funcionales: esto incluye el diseño del diseño general, la disposición de los productos en las tiendas en línea y fotografías en un sitio web de tarjeta de presentación.