AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Margen CSS


Next Page >>
HTML images

CSS Tutorial » Margen CSS

Margen CSS definicion

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.

Existen propiedades para establecer el margen para cada lado de un elemento (superior, derecha, inferior e izquierda).

Este elemento tiene un margen de 25px.
(espacio alrededor de caja verde marcado con amarillo)

 

Establecer márgenes para lados individuales

Puede especificar los márgenes de los lados individuales de un elemento, como los lados superior, derecho, inferior e izquierdo, utilizando CSS

Todas las propiedades de los márgenes pueden tener los siguientes valores:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #FFC;
}
div {
border: 1px solid green;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 20px;
margin-left: 50px;
background-color: lightblue;
}
</style>
</head>
<body>

<div>
<h2>Usar propiedades de margen individuales</h2>
Este elemento div tiene un margen superior de 80 px, un margen derecho de 20 px, un margen inferior de 80 px y un margen izquierdo de 50 px.</div>

</body>
</html>

Etiquetas: Margen CSS, valores, centrado, definición, no funciona, propiedad, margen y relleno en css, margen relleno bordes y box model en css

 

La propiedad de taquigrafía de margen

Para acortar el código, es posible especificar todas las propiedades de los márgenes en una propiedad.

La propiedad de margen es una propiedad abreviada de las siguientes propiedades de margen individuales:

Si la propiedad de margen tiene cuatro valores :
margin: 20px 55px 70px 90px; eso significa:
el margen superior es de 20px
el margen derecho es 55px
el margen inferior es de 70px
el margen izquierdo es 90px

Si la propiedad de margen tiene tres valores:

margin: 20px 55px 70px;

Si la propiedad de margen tiene dos valores:

margin: 20px 55px;

Si la propiedad de margen tiene un valor:

 

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 20px 50px 70px 90px;
background-color: lightblue;
}
p {
border: 1px solid black;
margin: 20px 50px 70px;
background-color: lightblue;
}
pre {
border: 1px solid black;
margin: 20px 40px;
background-color: lightblue;
}
h1 {
border: 1px solid black;
margin: 60px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>La propiedad de taquigrafía de margen: 4 valores</h2>
<div>Este elemento div tiene un margen superior de 20px, un margen derecho de 50px, un margen inferior de 70px y un margen izquierdo de 90px.</div>

<hr>
<h2>La propiedad de taquigrafía de margen: 3 valores</h2>
<p>Este elemento p tiene un margen superior de 20px, un margen derecho e izquierdo de 50px y un margen inferior de 70px.</p>

<hr>
<h2>La propiedad de taquigrafía de margen - 2 valores</h2>
<pre>Este pre elemento tiene un margen superior e inferior de 20px y un margen derecho e izquierdo de 40px.</pre>

<hr>
<h2>La propiedad de taquigrafía de margen - 1 valor</h2>

<h1>Este elemento h1 tiene un margen superior, inferior, izquierdo y derecho de 60px.</h1>
</body>
</html>

 

Centrado horizontal con márgenes automáticos

El valor automático ( auto ) de la propiedad de margen le dice al navegador web que calcule automáticamente el margen.
Esto se usa comúnmente para centrar un elemento horizontalmente dentro de un contenedor más grande.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Centrado de un elemento con margen automático de CSS</title>
<style>
.caja {
width: 350px;
height: 210px;
margin: 0 auto;
background-color: #D6D6D6;
}
</style>
</head>
<body>
<div class="caja">
<h1>Este es un titulo</h1>
<p>Este es un párrafo de texto.</p>
</div>
</body>
</html>

 



Etiquetas: Margen CSS, valores, centrado, definición, no funciona, propiedad, margen y relleno en css, margen relleno bordes y box model en css
Margen CSS - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...