Cómo sangrar desde el margen izquierdo de html. Dar formato a un párrafo HTML

Los usuarios califican un recurso web en función de su atractivo visual. Por lo tanto, incluso un texto útil desde el punto de vista informativo puede no leerse debido a que está mal diseñado. 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 presentación visual. La llegada de la tecnología CSS ha ampliado las posibilidades de crear artículos atractivos. Una de las propiedades diseñadas para facilitar la lectura de la escritura es la sangría de 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 caso más simple se escribe 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, la siguiente entrada dice que el margen derecho será de 22 píxeles:

margen derecho: 22px.

Para otros lados, se supone que las distancias alrededor del bloque son iguales al valor del elemento principal.

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. Bloque con alto valor inmobiliario margen“absorberá” a su vecino. Como resultado, el espacio entre elementos será de 35 píxeles.

Línea "roja"

Al formatear un documento en un editor de texto, los usuarios prefieren especificar cada párrafo nuevo usando una línea "roja". Con la ayuda de CSS, es fácil sangrar el texto a la izquierda: 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).

Esta propiedad se puede establecer en heredar. Esta entrada dice que el bloque usa una propiedad similar al bloque principal.

sangría de texto: heredar.

Sorprendentemente, ¡también puede tomar 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.

Se revisan las propiedades básicas de CSS. Y la práctica ayudará a consolidarlos. A continuación se ofrecen algunos consejos finales para aplicar lo que ha aprendido al desarrollo de su sitio 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";
• La sangría de párrafo negativa se utiliza para indicar la primera línea de un párrafo utilizando una imagen.

Al leer cualquier libro, periódico, revista o cualquier texto normal en general, te has topado con muchos párrafos y la primera línea de cada uno de ellos contiene una pequeña sangría. En este artículo mostraré la mejor opción para configurar sangrías de párrafo usando CSS.

Por supuesto, se puede insertar cualquier cantidad de espacios usando , seleccionando así la sangría necesaria, pero probablemente comprenda que este método es, por decirlo suavemente, inconveniente. Y la solución a este problema es muy sencilla.

Ya deberías saber que en HTML, un párrafo se crea usando la extensión . Por lo tanto, cada párrafo debe tener su propia etiqueta. Y para sangrar la primera línea de cada párrafo, simplemente conecte el siguiente código CSS:

PAG(
sangría de texto: 10px;
}

En este ejemplo, hicimos una sangría de 10 píxeles. Puede jugar con este valor para encontrar el mejor para su sitio.

De esta sencilla forma puedes establecer una sangría para las primeras líneas de cualquier párrafo del texto del sitio.

Si tienes alguna duda o quieres comentar este artículo, puedes dejar tu comentario al final de la página.

Comentarios (9):

31.05.2013 13:10:03

Hola Mikhail, ayúdame a resolver el problema con el siguiente código CSS: .bam ( borde: 1px negro sólido; radio de borde: 8px; margen inferior: 4%; alineación de texto: izquierda; ancho: 84%; ) .bam .autor (color de fondo: blanco; borde inferior: 1 px negro sólido; radio de borde superior derecho: 8 px; radio de borde superior izquierdo: 8 px; peso de fuente: negrita; relleno: 4 px;) .bam .text (color de fondo: WhiteSmoke; radio-inferior-derecho-borde: 8px; radio-inferior-izquierdo-borde: 8px; relleno:4px; ) Es necesario que el texto dentro de ".bam .text" se ajuste a otro línea si no cabe en una línea. Pero por alguna razón no se transfiere, sino que sale del bloque. Ayuda a resolver este problema.

Respuesta

06.06.2013 22:42:20

Hola Mikhail, ¿sabes cómo encontrar una salida a la siguiente situación: hay un bloque, y dentro de él hay otro bloque, y en este bloque, lo que hay dentro es texto escrito (la longitud del texto es desconocido de antemano). Entonces, ¿cómo se puede hacer que la altura del bloque principal dependa de la altura del bloque dentro de él (con texto)? Por alguna razón, resulta que la altura del bloque principal es menor que la altura del bloque interno.

Respuesta

Administración 06/06/2013 23:32:40

Todos los bloques externos se estiran según el tamaño de los bloques internos. No es necesario hacer esto, ya debería estar ahí de forma predeterminada.

Respuesta

07.06.2013 11:11:09

y miras: http://progbase.ru/about.php

Respuesta

Administración 07/06/2013 21:54:37

Debe usarse: coloque este bloque en diferentes lugares y vea qué cambia. Una vez que esté todo en orden déjalo ahí.

Respuesta

13.09.2013 21:39:34

¡Hola! Ayúdenme a hacer sangrías y otros estilos de texto en esta ventana de información sobre herramientas. Algo simplemente no funciona, eso es todo.

.podskazka( color de fondo: #FF6600; relleno:0px; borde:3px sólido #66FFFF; posición:absoluta; margen: 3px; ancho: 200px; altura mínima: 50px; altura máxima: automático; espacio en blanco: normal ; borde inferior: 1px discontinuo #000080; función podskazka() ( this.show = function(text,x,y) ( var div = document.createElement("div"); div.className = "podskazka"; div. id = "metka"; div.innerHTML = texto; var koordx = x + 0; var koordy = y + 20; div.style.top = koordy + "px"; ocultar = función() ( var metka = document.getElementById("metka"); metka.parentNode.removeChild(metka); ) var vsplil = new podskazka();

pista Pista y más en el texto

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: relleno Disponemos de dos mesas, limón y azul, situadas una debajo de la otra. 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. margen Los campos están establecidos por estilo.

. 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

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;

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:, tapa acolchada, 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:

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum". Párrafo 1.10.32 "de Finibus Bonorum et Malorum", escrito por Cicerón en el 45 d.C. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi arquitecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sedquia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, QUIS NOSTRUM Exercitational Ullam Corporis Suscipit Laboriosam, Nisi Ut Aliquid Ex Ea Commodi Consequatur? Traducción al inglés 1914, H. Rackham "Pero debo explicarles cómo nació toda esta idea errónea de denunciar el placer y alabar el dolor y les daré una descripción completa del sistema, y ​​les explicaré las enseñanzas reales del gran explorador. de la verdad, maestro constructor de la felicidad humana. Nadie rechaza, desagrada o evita el placer en sí, porque es placer, sino porque quien no sabe buscar el placer racionalmente encuentra consecuencias extremadamente dolorosas. Cualquiera que ama o persigue o desea obtener dolor por sí mismo, porque es dolor, pero porque ocasionalmente ocurren circunstancias en las que el aceite y el dolor pueden proporcionarle un gran placer. Para tomar un ejemplo trivial, ¿quién de nosotros realiza alguna vez un ejercicio físico laborioso? excepto para obtener alguna ventaja de ello? ¿Pero quién tiene derecho a criticar a un hombre que elige disfrutar de un placer que no tiene consecuencias molestas, o a uno que evita un dolor que no produce ningún placer resultante? Párrafo 1.10.33 "de Finibus Bonorum et Malorum", escrito por Cicerón en el 45 d.C. "At Vero EOS et Accusamus et Iusto dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate Non Provider, Similique Sunt in Culpa Qui Officia Deserunt Mollitia Animi, ID Laborum et Dolorum Fuga rerum facilis est et expedita distintivo. Nam libero tempore , cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas asumirda est, omnis dolor repellendus et aut officiis debitis aut rerum necessitatibus saepe. hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Traducción al inglés de 1914, H. Rackham "Por otro lado, denunciamos con justa indignación y desagrado a los hombres que están tan engañados y desmoralizados por los encantos del placer del momento, tan cegados por el deseo, que no pueden prever el dolor y los problemas que les esperan. y la misma culpa corresponde a aquellos que fallan en su deber por debilidad de voluntad, lo que es lo mismo que decir por alejarse del aceite y del dolor. Estos casos son perfectamente simples y fáciles de distinguir cuando nuestro poder de elección es. Sin trabas y cuando nada impide que podamos hacer lo que más nos gusta, todo placer debe ser bienvenido y todo dolor evitado. Pero en determinadas circunstancias y debido a las exigencias del deber o de las obligaciones de los negocios, ocurrirá frecuentemente que los placeres tengan que ser necesarios. ser repudiado y las molestias aceptadas, por lo tanto, el hombre sabio siempre se atiene en estas materias a este principio de selección: rechaza los placeres para asegurar otros placeres mayores, o soporta dolores para evitar dolores peores.

Tabla de prueba (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)

Sangría en un documento html

¡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.

Veamos cómo sangrar texto en HTML usando una etiqueta especial que crea un espacio. Es necesario insertar el código el número requerido de veces para lograr la desviación deseada del 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 sus capacidades limitadas, porque para aumentar la distancia es necesario agregar más etiquetas, lo que satura el documento.

Aplicar una etiqueta de cita

Al estudiar en detalle cómo sangrar texto en código HTML, puede encontrar un método alternativo que brinde 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 esta etiqueta suele incluir una cita.

Opciones alternativas

Si tiene la intención de moverse una distancia no estándar, deberá utilizar el parámetro de sangría de texto relacionado con la hoja de estilo CSS. El método considerado asegura la creación de una desviación de la primera línea a la 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 prefieren 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íbase al correo electrónico para recibir actualizaciones del proyecto. Hasta luego.