
Mediante las hojas de estilo CSS podemos modificar los márgenes de una página web. Esto hará que nuestro contenido se posicione en un lugar u otro de la página. Lo podremos pegar al borde superior, separarlo de la izquierda,… Todo aquello que necesitemos para darle estilo a la página web.
Si queremos modificar los márgenes de una página web deberemos de utilizar cuatro propiedades CSS:
margin-bottom
, para establecer el margen inferior.margin-left
, para establecer el margen izquierdo.margin-right
, para establecer el margen derecho.margin-top
, para establecer el margen superior.
Los valores que pueden recibir estas propiedades se pueden establecer mediante un valor absoluto de longitud ya sea en pixels, em, rem,… o bien en porcentajes. Siguiendo la siguiente estructura:
margin-top : <margin-width> | inherit
Estas propiedades CSS se las podemos asignar a cualquier elemento HTML. Si bien, para nuestro caso se lo asignaremos al cuerpo de la página. Es decir, al elemento body
. De esta manera, el código CSS quedaría de la siguiente forma:
body{ margin-left: 0px; margin-right: 10px; margin-top: 0px; margin-bottom: 10px; }
En el caso de que queramos asignar el mismo valor a todos los márgenes podemos utilizar directamente el atributo margin
, asignándole un valor. En este punto el código dándole valor a la propiedad margin
quedaría de la siguiente forma:
body{ margin: 10px; };
Esta forma resumida se puede aplicar también definiendo la propiedad margin
con 2 valores, de esta manera el primero se referiría a margin-top
y margin-bottom
, y el segundo valor se referiría a margin-left
y margin-right
.
En este caso tendíamos la siguiente definición de la propiedad en CSS:
body{ margin: 0px 10px; };
Otra opción es que existan 3 valores. Donde el primero sería para margin-top
, el segundo para margin-left
e margin-right
, y el tercero para margin-bottom
.
body{ margin: 0px 10px; };
O, finalmente, dar los 4 valores directamente en la propiedad margin
:
body{ margin: 2px 5px 8px 10px; };
Que se asignarían siguiendo las agujas del reloj, empezando por margin-top
. Por lo que serían margin-top
, margin-left
, margin-bottom
y margin-right
.
Espero que, a partir de este momento, puedas establecer los márgenes de tu página web de una forma sencilla mediante código CSS.
andrea
hola es que quiero digamos tener asi como aqui un lugar para que las personas puedan comentar y que puedan comentar nuestrra pag,,tambien se como se hace con facebook pero quiero uno que sea solo de mi pagina y e visto que hay qyue hace conexion con la base de datos pero no jjala me ayudarian con esto porfa.. gracias y muy buen material
daniel
no entiendo si es necesario crear otro documento css o en el mismo que tenemos de nuestra pagina ejemplo en mi caso
Bladimir
Es opcional pero para mayor orden se usa en otro archivo
angie vanessa
es lomejor intenten
Laura
la página se ve perfecta en monitores 14¨y 15 ¨pero en los mas grandes se modifica totalmente, que debo hacer?
Víctor Cuervo
@Laura,
Puedes darnos más información para poder ayudarte. Los problemas de visualización suelen estar relacionados con la resolución.
Esperamos tus comentarios para poder ayudarte.
jose
hola buenos dias, pero eso sirve para eliminar el margen de los formularios tambien?
Víctor Cuervo
@jose,
Sí, las propiedades de margen (margin) las puedes aplicar a cualquier elemento.
Butifarra
Muy Buenoo n_n!
Víctor Cuervo
@Butifarra,
Gracias por los ánimos. Intentamos ir poco a poco incluyendo nuevos contenidos.
Geral
Hola este curso es genial
Joseph
Gracias se pasaron eh…
carolina
ayudo de mucho gracias
DARKK*Bass
muy útil información
eva
ok!