Margin
En la lección anterior vimos como manipular la posición de un formulario haciendo uso del atributo float, a continuación veremos una serie de atributos que nos ayudaran a darle mas formatos de disposición a nuestro formulario.
En esta lección veremos la propiedad margin.
El margen despeja un área alrededor de un elemento (fuera de este). El margen no tiene un color de fondo, y es completamente transparente.
La propiedad margin puede recibir diferentes valores:
- auto: el navegador calcula el margen automáticamente
- dimensiones: puede ser en pixeles, pulgadas o porcentajes.
Podemos especificar los margenes de manera individual de la siguiente manera:
margin-top:100px;O podemos hacerlo de manera abreviada, de las siguientes maneras.
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
- margin: 25px 50px 75px 100px;
- margin superior es 25px
- margin derecho es 50px
- margin inferior es de 75px
- margin izquierdo es de 100px
- margin: 25px 50px 75px
- margin superior es 25px
- los márgenes derecho e izquierdo son 50px
- margin inferior es de 75px
- margin: 50px 25px;
- márgenes superior e inferior son 25px
- los márgenes derecho e izquierdo son 50px
- margin: 25px;
- todos los cuatro márgenes son 25px
Ahora aplicaremos estilos a nuestro ejemplo del formulario
<!DOCTYPE HTML><html lang = "es"><head><title>Formulario</title><meta charset = "UTF-8" /><style>fieldset {width: 80%;margin: auto;}form{width: 30%;}label {float: left;width: 30%;margin-left: 15%;}input {display: block;}button {display: block;margin: auto;}</style></head><body><form action = ""><fieldset><label>Nombre</label><input type = "text" id = "txtNombre" /><label>Dirección</label><input type = "text" id = "txtDirec" /><label>Teléfono</label><input type = "text" id = "txtTel" /><button type = "button">Enviar</button></fieldset></form></body></html>
En el formulario anterior aplicamos un margen con un valor auto, el cual le permite al navegador ajustar un margen predefinido.
Después le colocamos un margen izquierdo a los elementos label, lo cual lo separa del borde del "fieldset".
Y también le colocamos un margen con valor auto al elemento button.
Desde luego usted puede implementar diferentes formas para el margen, sin embargo el objetivo de este tutorial es que usted vea el uso de la propiedad margin.
No hay comentarios:
Publicar un comentario