Sangría desde el principio de la página html. Relleno y bordes en CSS usando parámetros de margen, relleno y borde. Prácticas generales de formato de contenido
¡Buen día! La configuración de sangrías para texto e imágenes es el tema principal de la publicación de hoy. Echemos un vistazo más de cerca a qué enfoques se pueden aplicar en la práctica.
Al crear un sitio web, un webmaster se ocupa de bloques de texto y frases publicadas en las páginas del proyecto. Resolver problemas individuales implica utilizar etiquetas HTML, agregó el editor. Hay varios tipos de atributos que le permiten mover frases o cambiar la ubicación de fragmentos en pagina electronica.
Establecer sangrías insertando espacios
Veamos cómo sangrar texto en HTML usando etiqueta especial, asegurando la formación de una brecha. Necesitas pegar el código. cantidad requerida veces para lograr la desviación deseada desde el borde de la página.
El código anterior puede ser procesado por todo tipo de navegadores y el webmaster recibirá un resultado garantizado. La desventaja del método son las capacidades limitadas, porque para aumentar la distancia es necesario agregar más etiquetas, y esto satura el documento.
Aplicar una etiqueta de cita
Al estudiar en detalle cómo sangrar texto en código HTML, puede encontrar método alternativo, donación más posibilidades.
Aquí tendrás que usar blockquote, que te permite mover el fragmento a la izquierda y a la derecha unos 40 px. Basta con escribir un código idéntico al del ejemplo dado:
El método le permite manipular frases dentro de un valor fijo de 40 px. También vale la pena señalar que en esta etiqueta normalmente concluye con una cita.
Opciones alternativas
Si planea moverse a una distancia no estándar, deberá usar el parámetro de sangría de texto, que se relaciona con el estilo. tabla CSS. El método considerado asegura la creación de una desviación de la primera línea por distancia requerida. Es necesario realizar los siguientes cambios en el editor:
Cuando es necesario medir el número requerido de píxeles de una imagen, se da preferencia a códigos simples pero efectivos.
En el primer caso, solo se establecen los valores de desplazamiento de los bordes de la imagen. En el segundo, la posición de la imagen se establece en el borde izquierdo y el texto fluye hacia la derecha, y en el tercero, al revés.
La información ha llegado a su fin. Cuéntame, ¿encontraste la información que buscabas? La respuesta se puede escribir en los comentarios.
Finalmente, mencionaré que el blog de Workip está dedicado principalmente a opciones monetarias para ganar dinero en línea. ¿Sabes qué métodos son realmente prometedores desde el punto de vista financiero? Ya se han publicado descripciones de algunos de ellos.
La publicación de materiales continúa. Suscríbete a correo electrónico para actualizaciones del proyecto. Hasta luego.
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 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 punto y aparte usando la línea roja. CON usando CSS sangrar el texto de la izquierda es fácil de hacer: se utiliza la construcción sangría 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 sangría 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 sangrías verticales, las reglas de las matemáticas no se aplican: los intervalos se superponen, el elemento con el valor mayor "gana";
- negativo sangría de párrafo Se utiliza para indicar la primera línea de un párrafo mediante una imagen.
horizontales y márgenes verticales desde el borde del navegador hasta el contenido de la página web están integrados en el navegador de forma predeterminada. Sin embargo, puede cambiar el valor de estos parámetros, haciendo las sangrías más grandes o más pequeñas según lo desee. Por ejemplo, puede establecer una sangría desde el borde superior de la ventana hasta el título de la página o eliminarla por completo.
Las sangrías se especifican mediante los parámetros de margen y relleno. La presencia de dos atributos en lugar de uno es requerida por los intereses de diferentes navegadores, margen - Explorador de Internet y relleno: Opera y Fire Fox. Combinación diferentes parámetros garantiza que la página web se muestra en diferentes navegadores
parámetros de margen y relleno (ejemplo 1).
Relleno en la página El selector BODY al que se aplica el estilo establece el relleno para toda la página web. Lo mismo puede hacerse en relación con elementos individuales
, por ejemplo, títulos (ejemplo 2).
Ejemplo 2: cambiar la sangría del encabezado
Título Utilice simultáneamente los parámetros de margen y relleno en en este caso
ya no es necesario.
Para acortar etiquetas, puede utilizar el parámetro de margen universal, como se muestra en el ejemplo 3. Tres valores separados por un espacio determinan el margen superior, izquierdo, derecho e inferior al mismo tiempo.
Ejemplo 2: cambiar la sangría del encabezado
Sangrías de párrafo
Contenido principal EN en este ejemplo
Se cambian las sangrías de los párrafos, ya que el uso de valores en línea no siempre es apropiado. El diseño de bloques se utiliza a menudo al crear un sitio web o un blog. Como consecuencia de esto, a menudo es necesario sangrar los bloques. Por esta razón, sobre cómo sangrar en CSS descrito detalladamente en esta lección
. Para el navegador, cada etiqueta es un contenedor que tiene contenido, relleno, márgenes exteriores y un borde. En esta lección aprenderemos cómo hacer sangrías internas y externas y consideraremos sus parámetros principales.
Como puede ver, las sangrías se pueden hacer en cuatro direcciones: sangría superior (arriba), sangría inferior (abajo), sangría izquierda (izquierda) y sangría derecha (derecha). Las unidades de medida pueden ser píxeles, porcentajes y otras. unidades CSS- más sobre ellos. Este tutorial utiliza píxeles.
Relleno de bloque
Para relleno en CSS la propiedad corresponde relleno. Entonces, veamos un ejemplo de cómo configurar el relleno interno para un bloque:
relleno superior: 5px; /*relleno superior*/ padding-left: 8px; /*relleno izquierdo*/ padding-right: 8px; /*relleno derecho*/ padding-bottom: 5px; /*relleno inferior*/
En este ejemplo, el relleno se establece por separado para cada lado del bloque. Además, hay varias formas de configurar la sangría en CSS:
margen: 5px 8px 5px 8px; /*márgenes superior, derecho, inferior, izquierdo*/ margen: 5px 8px 5px; /*describe los márgenes superior, izquierdo, derecho e inferior*/ margin: 5px 8px; /*describe los márgenes superior e inferior, derecho e izquierdo*/ margin: 7px; /*describe todos los márgenes internos de 7px*/
Es más fácil recordar el primero y últimos caminos. En el primer caso, las sangrías se colocan en el sentido de las agujas del reloj (arriba, derecha, abajo, izquierda); podemos especificar cualquier cantidad de sangría; en el último caso, las sangrías en todos los lados serán las mismas;
Márgenes de bloque
La propiedad responsable de los márgenes en CSS es margen. Ejemplos de márgenes en CSS:
margen superior: 5px; /*margen superior*/ margen-izquierdo: 10px; /*margen izquierdo*/ margen-derecho: 10px; /*margen derecho*/ margen-inferior: 5px; /*margen inferior*/
relleno: 5px 10px 5px 10px; /*márgenes superior, derecho, inferior, izquierdo*/ padding: 5px 10px 5px; /*describe el relleno superior, izquierdo y derecho, inferior*/ padding: 5px 10px; /*describe el relleno superior e inferior, derecho e izquierdo*/ padding: 7px; /*describe todos los márgenes de 7px*/
De este modo, El diseño de bloques se utiliza a menudo al crear un sitio web o un blog. Como consecuencia de esto, a menudo es necesario sangrar los bloques. Por esta razón, sobre- La pregunta no es difícil, pero sí muy relevante. Para comprender mejor la información descrita anteriormente, debe recordar que existen dos propiedades: relleno - sangrías internas y margen - sangrías externas. Además, como ya sabes, hay varias formas de establecer sangrías, puedes utilizarlas.
