hogar › Teléfono › Tamaños de sangría HTML. Prácticas generales de formato de contenido. Reglas que cambian la posición de los elementos.

Tamaños de sangría HTML. Prácticas generales de formato de contenido. Reglas que cambian la posición de los elementos.

Los márgenes y el relleno son estilos muy importantes al crear una página HTML. Le permiten colocar elementos con mayor precisión, crear un marco con los espacios necesarios, etc. Ambos estilos son muy similares y realizan funciones similares. Pero todavía hay diferencias.

Los elementos pueden anidarse o ubicarse uno al lado del otro. Veamos el siguiente ejemplo:

Tenemos dos mesas, limón y color azul, ubicados uno debajo del otro. Las tablas constan de una celda. Hay un bloque rojo en la primera celda de la tabla. Usando este ejemplo, veamos cómo funcionan los márgenes y las sangrías.

Los campos están establecidos por estilo. relleno. Este estilo sólo se aplica a elementos contenedores, que pueden contener otros elementos. El estilo le permite establecer el margen entre los bordes de un elemento y su contenido. Estilo margen le permite establecer sangrías desde un elemento hasta los bordes más cercanos de otro elemento. Los bordes de otro elemento pueden ser los bordes del contenedor principal, así como los bordes de la propia página.

Hay varias formas de configurar estos estilos. Por ejemplo, especifique directamente el tamaño de todos los márgenes o sangrías con un argumento en alguna unidad de medida (px, ex, em, pt, cm, etc.):

relleno: 3px; margen: 3px;

En este caso, los márgenes y sangrías serán iguales en los cuatro lados. Al especificar dos argumentos separados por un espacio:

relleno: 3px 5px; margen: 3px 5px;

el primero determinará la cantidad de márgenes/sangrías en la parte superior e inferior, el segundo, a la izquierda y a la derecha. Cuando se le dan tres argumentos:

relleno: 3px 5px 2px; margen: 3px 5px 2px;

el primero es el margen/sangría en la parte superior, el segundo es tanto izquierdo como derecho, el tercero está en la parte inferior. Con cuatro argumentos:

relleno: 3px 5px 2px 6px; margen: 3px 5px 2px 6px;

el primero es el margen/espacio en la parte superior, el segundo está a la derecha, el tercero está en la parte inferior, el cuarto está a la izquierda. Es fácil de recordar: el primero es desde arriba, luego en el sentido de las agujas del reloj. Además, puede configurar los márgenes y el relleno para un borde específico por separado, utilizando los estilos apropiados: acolchado superior, relleno-derecha, fondo acolchado, relleno-izquierda, margen superior, margen derecho, margen inferior, margen izquierdo. El valor de estos estilos solo puede ser un argumento, que especifica la cantidad de margen/relleno para un lado determinado.

En la figura, el bloque rojo está dentro de la celda de la tabla y adyacente a sus bordes, es decir, la celda no tiene márgenes. Configuremos los márgenes de las celdas usando el estilo:

relleno: 5px;

Como resultado, la página cambiará a lo siguiente:

Veamos ahora las sangrías. Dos tablas están adyacentes entre sí, si queremos separarlas un poco, podemos aplicar sangrías. Aquí hay dos opciones: establecer la sangría inferior de la primera tabla o la sangría superior de la segunda tabla. Usemos el segundo:

margen superior: 5px;

Tenga en cuenta que configuramos la sangría específicamente en la tabla y no en la celda de la tabla, como es el caso de los campos. Aquí está el resultado:

Por cierto, en el primer caso (la brecha entre el bloque rojo y los límites de la celda principal), se podría lograr el mismo efecto configurando las sangrías del bloque. En general, si algo no queda claro, háznoslo saber en los comentarios.

Código HTML de la página experimental:

<HTML > <cabeza > <título > Prueba</título> <meta http-equiv = "Tipo de contenido" content = "text/html;charset=utf-8" > </cabeza> <cuerpo > <estilo > tabla (ancho: 200 px; alto: 150 px; borde: 1 px sólido #555; colapso del borde: colapso) td (alineación vertical: superior; relleno: 0 px) div (ancho: 100 px; alto: 100 px; fondo: rojo)</estilo> <estilo de tabla = "fondo: lima" > <tr > <estilo td = "relleno: 5px" > <estilo div = "margen: 0px" ></div> </td> </tr> </tabla> <estilo de tabla = "fondo: azul cielo; margen superior: 5px"> <tr > <td ></td> </tr> </tabla> </cuerpo> </html>

Al párrafo (etiqueta

) y encabezado (etiqueta

) agrega automáticamente relleno superior e inferior, lo que en total da larga distancia entre el título y el texto. Para reducir la cantidad de sangría, debe agregar explícitamente la propiedad de margen inferior al selector H1. Además, puede establecer un valor positivo, cero o negativo. De esta manera es fácil establecer el valor de sangría deseado.

¿Cómo puedo agregar una sangría de primera línea para cada párrafo?

Cuando instalar sangría de párrafo, lo mejor es usar estilo propiedad de sangría de texto. Su valor determina cuánto se desplazará el texto de la primera línea hacia la derecha desde posición inicial. Ancho bloque de texto sin embargo, no cambia y permanece especificado inicialmente. La cantidad de sangría se puede especificar en píxeles, porcentajes u otras unidades disponibles (ejemplo 1).

¿Cómo cambiar la sangría en una página web?

El relleno en una página web, aunque no es visible, no permite que el contenido se ajuste perfectamente a los bordes de la ventana del navegador para una experiencia de lectura cómoda. Tuyo valor propio Los márgenes se pueden establecer cambiando los valores de la propiedad de margen del selector de cuerpo.

¿Cómo quitar el relleno alrededor de un formulario?

Al agregar un formulario a través de una etiqueta

el relleno se agrega automáticamente a su alrededor en la parte superior e inferior. Para eliminarlos, utilice propiedad de estilo margen con valor cero agregándolo al selector FORM.

¿Cómo cambiar la distancia entre párrafos de texto?

Al usar la etiqueta

Las sangrías se agregan automáticamente arriba y abajo párrafo de texto. Esto se hace para separar visualmente un bloque de texto del siguiente. Está claro que los valores de sangría predeterminados no siempre son satisfactorios, por lo que en ocasiones hay que reducirlos o aumentarlos. Para hacer esto, puede usar la propiedad universal margin , determina las sangrías en todos los lados del párrafo o margin-top para la sangría en la parte superior y margin-bottom para la sangría en la parte inferior.

Los usuarios califican un recurso web en función de su atractivo visual. Por lo tanto, incluso informativamente texto útil Es posible que no se lea debido a que está mal formateado. Conclusión: es necesario abordar con cuidado y atención no solo el contenido semántico de las páginas del sitio, sino también su representación visual. Apariencia tecnologías CSS amplió las posibilidades de crear artículos atractivos. Una de las propiedades diseñadas para facilitar la lectura de lo escrito es la sangría. texto CSS.

Márgenes y relleno: ¿cuál es la diferencia?

Antes de comenzar a formatear el texto, debes comprender qué son los márgenes y las sangrías. A pesar de que estos elementos de marcado en algunos casos parecen iguales para el usuario, existen diferencias fundamentales entre ellos:

el campo está especificado por la propiedad relleno, sangría - margen;
el margen está determinado por el espacio entre el contenido y el borde del bloque, la sangría, entre los bordes de los bloques adyacentes;
Los márgenes pueden o no tenerse en cuenta en las dimensiones del elemento (ancho y alto).

propiedad de margen

Entonces, para establecer la sangría horizontal o vertical del texto CSS, use la construcción margen. Esta propiedad se aplica a la etiqueta. definiendo el párrafo del documento. En el muy caso sencillo está escrito como:

margen: 12px.

Esta línea significa que alrededor del bloque de texto (o cualquier otro bloque) habrá una sangría de 12 píxeles en todos los lados. Para aumentar el intervalo, por ejemplo, tres veces, basta con escribir:

margen: 36px.

Pero ¿y si el intervalo entre bloques fuera diferente en cada lado? Los desarrolladores de páginas web utilizan varias formas de grabación:

margen: 11px 22px.
margen: 11px 22px 33px.
margen: 11px 22px 33px 44px.

En el primer ejemplo, se sangrarán 11 píxeles desde los bordes superior e inferior del bloque, y 22 píxeles en los lados del bloque. Según la segunda forma de grabación, habrá 11 píxeles entre el borde superior del bloque y el contenido, 33 píxeles entre la parte inferior y 22 píxeles en los lados. En el tercer caso, el relleno será de 11 píxeles en la parte superior, 22 píxeles en la derecha, 33 píxeles en la parte inferior y 44 píxeles en la izquierda.

También es posible registrar la distancia al límite del bloque en un solo lado: margen superior, margen inferior, margen izquierdo, margen derecho. Al traducir los nombres de las propiedades al ruso, es fácil adivinar su finalidad. Por ejemplo, próxima entrada dice que el margen derecho será de 22 píxeles:

margen derecho: 22px.

Para otros lados, se toman las distancias alrededor del bloque. igual al valor elemento padre.

Propiedad margen tiene una característica que un desarrollador debe tener en cuenta al utilizar la sangría vertical de texto CSS. Los intervalos de elementos adyacentes no se suman, sino que se superponen entre sí. Por ejemplo, supongamos que uno de los bloques tenga margen inferior: 15px, y el bloque adyacente a él debajo margen superior: 35px. La aritmética escolar y el sentido común sugieren que el espacio total entre ellos será de 50 píxeles. En la práctica este no es el caso. Bloquear con gran valor propiedades margen“absorberá” a su vecino. Como resultado, el espacio entre elementos será de 35 píxeles.

"Línea roja

Elaboración de un documento en editor de texto, los usuarios prefieren preguntar a cada uno Nuevo párrafo usando la línea roja. Mediante el uso Sangría CSS El texto de la izquierda es fácil de hacer: se utiliza la construcción. guion de texto. Está escrito así:

sangría de texto: 11px.

Es decir, la primera línea del párrafo se desplazará 11 píxeles con respecto al borde izquierdo. Para que el texto de una página web se parezca más a un documento en el editor, también debe configurar, es decir, escribir:

sangría de texto: 11px;

alineación de texto: justificar.

Además de los píxeles, al describir marcas, se permite utilizar otras unidades: pulgadas, puntos, porcentajes. Deje que el bloque tenga un relleno de texto CSS del 10%. Con un ancho de bloque de 500 píxeles, la línea roja será de 50 píxeles (10% de 500).

Para de esta propiedad el valor se puede establecer heredar. Esta entrada dice que el bloque usa una propiedad similar al bloque principal.

sangría de texto: heredar.

Sorprendentemente, también puede ser necesario valores negativos! En este caso, se forman los llamados voladizos, es decir, el texto principal permanece en su lugar y la primera línea se desplaza 22 píxeles hacia la izquierda:

sangría de texto: -22px.

Para evitar que las letras vayan más allá del borde izquierdo del navegador, además de guion de texto necesitas usar la construcción para configurar el campo:

relleno-izquierda: 22px.

Básico Propiedades CSS para ser considerado. Y la práctica ayudará a consolidarlos. Aquí hay algunos consejos finales Cómo aplicar el material aprendido al desarrollar sitios web:

la línea roja y la sangría de texto son conceptos diferentes y se utilizan diferentes propiedades para indicarlos;
Para márgenes verticales las reglas de las matemáticas no se aplican: los intervalos se superponen, el elemento con mayor valor “gana”;
La sangría de párrafo negativa se utiliza para indicar la primera línea de un párrafo utilizando una imagen.

Popular en la categoría: