Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Propiedades del margen CSS

Los siguientes ejemplos muestran las diversas propiedades de CSS que puede usar para aplicar márgenes a cualquier elemento HTML.
Los márgenes definen el espacio alrededor del elemento. Los márgenes CSS se especifican de forma similar a los bordes: se pueden establecer individualmente para cada lado o todos los lados a la vez.

Establecer márgenes en todos los lados

<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  div {
    borde : 1px  naranja sólida  ;
  }
  div > p {
    fondo : oro ;
    margen : 20px ;
  }
</ estilo >
Al aire libre
< div >
  < p >
    Este texto tiene un margen de 20 píxeles en los cuatro lados. Se anida dentro de un div con un borde para que sea más fácil ver el efecto del margen.
  </ p >
</ div >

Establecer márgenes para cada lado

Si no desea que la configuración de los márgenes se aplique a los cuatro lados, o si desea que se apliquen márgenes diferentes a cada lado, puede usar las siguientes propiedades:
Ejemplo:
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  p {
    fondo : oro ;
  }
  margen izquierdo {
    margen izquierdo : 60px ;
  }
</ estilo >
Al aire libre
< p  class = "left-margin" >
    Este texto tiene un margen izquierdo de 60 píxeles.
</ p >
< p >
    Este texto no tiene margen izquierdo establecido.
</ p >

Propiedad de taquigrafía

Este método utiliza una propiedad abreviada para establecer margin-topmargin-rightmargin-bottom, y margin-leften el mismo lugar. Este método es más rápido. También utiliza menos código que el método anterior. En realidad, es la misma propiedad que usamos en nuestro primer ejemplo (es decir, la marginpropiedad). La única diferencia es que aplicamos múltiples valores contra él.
<! DOCTYPE html>
< título > Ejemplo </ título >
< estilo >
  div {
    borde : 10px  sólido  lightblue ;
  }
  div > p {
    borde : 1px  puntos de  color naranja ;
    margen : 20px  50px  10px  30px ;
  }
</ estilo >
Al aire libre
< div >
  < p >
    Este texto tiene un margen de tamaño diferente para cada lado. Se anida dentro de un 'div' con un borde para que sea más fácil ver el efecto del margen.
  </ p >
</ div >

Variaciones

No es necesario proporcionar valores diferentes para los cuatro lados. Puede proporcionar uno, dos, tres o cuatro valores. Así es como funciona:
Si solo hay un valor, se aplica a todos los lados. Si hay dos valores, los márgenes superior e inferior se establecen en el primer valor y los márgenes derecho e izquierdo se establecen en el segundo. Si hay tres valores, la parte superior se establece en el primer valor, la izquierda y la derecha se establecen en el segundo, y la parte inferior se establece en el tercero. Si hay cuatro valores, se aplican a la parte superior, derecha, inferior e izquierda, respectivamente.
En otras palabras:
margin:10px;
  • Los cuatro lados tienen un margen de 10 píxeles.
margin:10px 20px;
  • La parte superior e inferior tienen un margen de 10 píxeles.
  • La derecha y la izquierda tienen un margen de 20 píxeles.
margin:10px 20px 30px;
  • La parte superior es 10px
  • Izquierda y derecha son 20px
  • La parte inferior es 30px
margin:10px 20px 30px 40px;
  • La parte superior es 10px
  • Derecho es 20px
  • La parte inferior es 30px
  • La izquierda es 40px

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas