Hoy hablaremos un poco con usted sobre los principios del diseño, es decir, sobre cómo organizar la sangría de ciertos elementos en su sitio.
El elemento en cuestión a sangrar puede ser texto, una imagen, una tabla o cualquier otro elemento HTML. Lo principal es seguir algunas reglas importantes, de las que ahora les hablaré.
Si solo está creando su sitio, le recomiendo que inserte las siguientes propiedades en la parte superior de su hoja de estilo principal:
* (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: antes, *: después (-webkit-box-sizing: border- box; -moz-box-sizing: border-box; box-sizing: border-box;)
¿Por qué es esto necesario, preguntas? Respondo a tu pregunta con un ejemplo ilustrativo.
Digamos que tiene un elemento de diseño como este:
Así es como se verá la opción sin usar las propiedades descritas anteriormente (elemento superior) y usarlas (elemento inferior):
¿Qué puedes ver aquí? Que el ancho del elemento en la primera versión (sin usar propiedades) se ha vuelto mayor que el especificado debido al relleno agregado, que no es del todo conveniente y correcto en términos de diseño.
La opción con propiedades es mucho más agradable desde el punto de vista estético, pero vale la pena usarla conscientemente, porque cuando las agrega a un sitio ya hecho, corre el riesgo de obtener un mal diseño y un "dolor de cabeza" en la forma de llevar todo esto a la forma adecuada. Todos los proyectos que dirigí desde cero no carecían de estas propiedades.
Y ahora, de hecho, hablemos de las opciones para organizar la sangría de elementos en su sitio con ejemplos ilustrativos.
Relleno con la propiedad CSS "padding"
Para que comprenda toda la lógica de las cosas, tomemos el siguiente fragmento de diseño como ejemplo:
con sus estilos:
Test_div (ancho: 250 px; borde: 1 px sólido;)
La versión visual es la siguiente:
¿Qué es la propiedad? relleno"? Ayuda a organizar el relleno en los elementos especificados. Agreguemos un relleno de 10px a nuestro diseño:
Test_div (ancho: 250 px; borde: 1 px sólido; relleno: 10 px; // relleno 10 px)
Visualmente, resulta así:
El número 10 en la propiedad significa que dentro de los elementos especificados, en cada uno de sus cuatro lados, se debe agregar una sangría de 10px. Los píxeles (px) se pueden reemplazar con porcentajes o cualquier otro valor CSS compatible.
Hay dos opciones en total indicación de los lados desde los que sangrar.
El primero - esto con una indicación explícita de las partes:
Acolchado superior: 10px; // Acolchado de 10px en la parte superior padding-right: 10px; // Relleno de 10px a la derecha padding-bottom: 10px; // Relleno inferior 10px padding-left: 10px; // relleno de 10px a la izquierda
En este caso, cada lado usa su propia propiedad. Y segundo:
Acolchado: 10px 0 0 0; // Relleno de 10px en la parte superior, todo lo demás es relleno de 0px: 10px 0; // Acolchado superior e inferior de 10px y acolchado de 0px en el acolchado lateral: 0 10px; // Acolchado de 0px en la parte superior e inferior y 10px en los lados
Aquí viene una simple enumeración de valores, cada uno de los cuales corresponde a un lado diferente. Los lados están configurados así: el primer valor es hacia arriba, el segundo hacia la derecha, el tercero hacia abajo y el cuarto hacia la izquierda, es decir, todo en sentido horario.
Si hay dos valores (superior y derecha), esto significa que los valores de espejo de los mismos valores van hacia abajo y hacia la izquierda, y solo eso. Todo parece estar claro. Si no necesita establecer la sangría para algunos de los lados, establezca el valor de este lado en "0". Me gusta más esta opción, ya que es más compacta, pero en mis esfuerzos usé la primera opción.
Este tipo de sangría es bueno para separar texto, contenido de celda de tabla y otra información de texto. Para separar los elementos en sí, similares a los del ejemplo anterior, hay otra propiedad.
Relleno exterior con la propiedad CSS "margin"
Un rasgo distintivo de la propiedad " margen"Es lo que se agrega al acolchado fuera del elemento, es decir, fuera.
También hay dos opciones para agregar aquí.
El primero - con una indicación explícita de la parte:
Margen superior: 10px; // Relleno de 10px en el margen superior derecho: 10px; // Margen de 10px en el margen inferior derecho: 10px; // Relleno inferior 10px margin-left: 10px; // relleno de 10px a la izquierda
Segundo - con una enumeración de valores, cada uno de los cuales corresponde a su propio lado:
Margen: 10px 0 0 0; // Margen superior de 10px, todo lo demás es margen de 0px: 10px 0; // Acolchado de 10px en la parte superior e inferior, y 0px en el margen lateral: 0 10px; // El relleno exterior es de 0px en la parte superior e inferior y 10px en los lados
No describiré todos los matices de trabajar con las reglas aquí, todo es igual que en la propiedad " relleno», Sobre esto está escrito arriba.
Usamos margen con el siguiente valor:
Test_div (ancho: 250 px; borde: 1 px sólido; margen: 10 px; // relleno 10 px)
Visualmente, se verá así:
Como puede ver en el ejemplo, en este caso se agrega una sangría externa, separando los elementos indicados.
Una característica importante: Si miró detenidamente el resultado, es posible que haya notado que el relleno de elementos adyacentes no se resume. Es decir, si el primer elemento tiene un relleno inferior exterior de 10 px y el segundo tiene un relleno superior exterior con el mismo valor, entonces la distancia total entre ellos también será de 10 px. Si es 10 y 15, respectivamente, entonces el total es 15, y así sucesivamente.
Este tipo de sangría se usa a menudo en texto, es decir, en el diseño de párrafos, así como en elementos que tienen bordes visibles.
Pero ambas propiedades no se limitan solo a estos elementos. Tú eliges las opciones para usarlas tú mismo, solo intenté darte una base sobre ellas.
Anya escribió el siguiente código (ejemplo 1) y obtuvo la página que se muestra en la fig. 1. Pero Anya no necesita espacio entre los bloques, así como a la derecha e izquierda de los bloques. ¿Qué cambios en el código se requieren para esto?
Hay demasiada sangría entre el encabezado y el cuerpo del texto, ¿cómo puedo reducirla?
Al párrafo (etiqueta
) y título (etiqueta
) agrega automáticamente relleno superior e inferior, que se suman a un gran espacio entre el encabezado y el texto. Para reducir la cantidad de relleno, debe agregar explícitamente la propiedad margin-bottom 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 sangrar la primera línea de cada párrafo?
Cuando necesite establecer una sangría de párrafo, es mejor usar la propiedad de estilo de sangría de texto. Su valor determina cuánto desplazar el texto de la primera línea a la derecha de su posición original. El ancho del bloque de texto no cambia y permanece establecido inicialmente. La cantidad de sangría se puede especificar en píxeles, porcentaje u otras unidades disponibles (ejemplo 1).
¿Cómo eliminar la sangría superior e inferior de la lista?
Utilice la propiedad de estilo margin-top y margin-bottom para el selector UL u OL, según el tipo de lista. También puede utilizar la propiedad de margen genérico.
¿Cómo cambio la sangría en una página web?
El relleno de la página web, aunque no está visible, no permite que el contenido se ajuste perfectamente a los bordes de la ventana del navegador para una lectura cómoda. Puede establecer su propio valor de margen cambiando la propiedad de margen del selector de cuerpo.
¿Cómo elimino el relleno alrededor de un formulario?
Al agregar un formulario a través de una etiqueta
