CSS Aplicar margen en un lado dado


Ejemplo

Propiedades específicas de la dirección

CSS le permite especificar un lado dado para aplicar margen a. Las cuatro propiedades proporcionadas para este fin son:

  • margin-left
  • margin-right
  • margin-top
  • margin-bottom

El siguiente código aplicaría un margen de 30 píxeles al lado izquierdo de la división seleccionada. Ver resultado

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin-left: 30px;
    height: 40px;
    width: 40px;
    background-color: red;
}
Parámetro Detalles
margen izquierdo La dirección en la que se debe aplicar el margen.
30px El ancho del margen.

Especificando la dirección usando la propiedad abreviada

La propiedad de margin estándar se puede expandir para especificar diferentes anchos a cada lado de los elementos seleccionados. La sintaxis para hacer esto es la siguiente:

margin: <top> <right> <bottom> <left>;

El siguiente ejemplo aplica un margen de ancho cero en la parte superior del div, un margen de 10 píxeles en el lado derecho, un margen de 50 píxeles en el lado izquierdo y un margen de 100 píxeles en el lado izquierdo. Ver resultado

HTML

<div id="myDiv"></div>

CSS

#myDiv {
    margin: 0 10px 50px 100px;
    height: 40px;
    width: 40px;
    background-color: red;
}