Cheat Sheet: Como recuar CSS texto

recurso web valorado polos usuarios polo seu apelido visual. Polo tanto, aínda información de texto utilidade non se pode ler debido ao feito de que é mal deseñado. Conclusión - a necesidade de coidado e atento non só ao contido semántico de páxinas, pero tamén para a súa presentación visual. A chegada da tecnoloxía CSS aumentou a posibilidade de crear un artigos atractivo. Unha das propiedades, destinados a facilitar a percepción da escritura - traveseiro texto CSS.

Margin e padding: Cal é a diferencia?

Antes de comezar a mellorar o texto, ten que entender o que as marxes e recheo. A pesar do feito de que estes elementos de reserva nalgúns casos o mesmo aspecto para o usuario, hai diferenzas fundamentais entre eles:

• campo axusta a propiedade estofado, guión - marxe;
• campo está determinada por un intervalo entre o contido eo límite do bloque, un espazo - entre os límites de bloques adxacentes;
• campo pode ser considerado como un elemento no tamaño (ancho e alto) e ningunha.

propiedade de marxe

Así, para definir o texto estofado CSS horizontal ou vertical, utilizar a marxe deseño. Esta propiedade é aplicable a etiqueta

documento parágrafo mestre. No caso máis simple, pode ser escrita como:

marxe: 12 píxeles.

Esta liña significa que en torno a un bloque de texto (ou calquera outro bloque) en todas as partes que se coloca na cazoleta 12 píxeles. Para aumentar o intervalo, por exemplo, tres veces é suficiente para escribir:

marxe: 36 px.

Pero e se entre os bloques do rango debe ser diferente en cada lado? Os desenvolvedores web usan varias formas de rexistros:

1. marxe: 11px 22px.
2. marxe: 11px 22px 33px.
3. marxe: 11px 22px 33px 44px.

No primeiro exemplo, o recuar 11 píxeles están feitos a partir dos límites inferior e superior do bloque, nos laterais do bloque - por 22 píxeles. Segundo unha segunda unidade de rexistro entre o bordo superior eo contido será de 11 píxeles, entre o menor - 33 de píxeles en cada lado - por 22 píxeles. No terceiro caso CSS texto traveseiro terá un valor de 11 píxeles dende o principio, lado dereito 22 píxeles, 33 píxeles e 44 píxeles desde o canto inferior esquerdo.

Tamén está dispoñible a posibilidade de gardar a distancia do límite de bloque de un só lado: Margin-top, Margin-bottom , a marxe esquerda, marxe dereita. Traducir os nomes das propiedades en lingua rusa, é fácil de adiviñar sobre o seu nomeamento. Por exemplo, a seguinte entrada indica que o descenso á dereita será igual a 22 píxeles:

Margin-right: 22rh.

Á distancia restante en torno aos lados do bloque asumido como igual ao valor do elemento pai.

Margin propiedade ten características que un creador precisa para lembrar cando a usar o texto CSS recuado vertical. Intervalos de elementos adxacentes non son sumados, e sobrepostos uns sobre os outros. Por exemplo, supoñamos que unha das unidades teñen unha marxe inferior-: 15 píxeles, e por baixo do bloque marxe superior adxacente: 35px. aritmética escola e sentido común dita que o espazamento total entre eles será de 50 píxeles. Na práctica, non é. Un bloque con un gran valor da marxe inmoble «andoriña" seu veciño. Como un resultado, o intervalo entre os elementos é de 35 píxeles.

liña de "Red"

Facendo o documento nun editor de texto, os usuarios prefiren pedir a cada novo parágrafo coa liña "vermella". Usando o texto traveseiro CSS á esquerda é fácil de facer - proxecto text-indent uso. Escrito así:

text-indent: 11px.

Esta é a primeira liña do parágrafo é desprazado cara á marxe esquerda de 11 píxeles. Para facer o texto na páxina web máis parecía un documento no editor, ten que instalar unha xustificación adicional, é dicir, escribir:

text-indent: 11px;

text-align: justify.

Ademais de píxeles, na descrición do uso doutras unidades de reserva - polgadas afirma cento. Deixe a unidade ten un recuar de texto CSS do 10%. Cando o ancho do bloque de píxeles 500, a liña vermella será de 50 píxeles (10% de 500).

Para esta propiedade pode ser amosado valor herdar. Este rexistro di que a unidade utiliza unha propiedade similar da unidade dos pais.

text-indent: herdar.

Sorprendentemente, o recuar pode asumir valores negativos! Neste caso, as proxeccións son formadas pola chamada, que é o texto básico permanece no lugar, ea primeira liña é desprazado á esquerda por 22 píxeles:

text-indent: -22px.

As letras non pásase ao longo da fronteira esquerda do navegador, ademais debe ser usado para definir a estrutura do campo do text-indent:

padding-left: 22px.

consellos útiles

As propiedades básicas de CSS para formato de texto son considerados. E resolve-los práctica axuda. Aquí están algúns consellos finais sobre como aplicar o material aprendido en desenvolvemento web:

• a liña vermella eo retroceso do texto - diferentes conceptos e diferentes propiedades utilizadas para a súa orientación;
• normas de retirada verticais non aplicar a matemática - intervalos se sobrepoñen, "gaña" elemento co maior valor;
• recuar negativo usado para indicar a primeira liña dun parágrafo cunha imaxe.