Curso IT Fundamentos CSS 025_Márgenes y Relleno

Márgenes

En CSS, los márgenes y el relleno son dos conceptos diferentes, ambos utilizados para controlar el espacio entre elementos y afectar el diseño de la página.

Efecto del ejemplo

Margen (Margen exterior)

El margen (margin) se refiere al espacio entre un elemento y sus elementos adyacentes. Los márgenes se pueden usar para controlar la distancia entre elementos y afectar el diseño de la página. Los márgenes no tienen color de fondo, son completamente transparentes y no afectan el tamaño real del elemento. Pueden ser valores positivos o negativos, la unidad puede ser píxeles (px), porcentaje (%), em, etc.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        margin: 10%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        margin: -50px 50px;
11
        background-color: green;
12
    }
13
    .example3 {
14
        margin: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Efecto: Efecto del ejemplo Se puede usar margin-top, margin-right, margin-bottom, margin-left para establecer el margen de una dirección específica individualmente.

Ejemplo:

1
    .example1 {
2
        margin-top: 100px;
3
        margin-right: 50px;
4
        margin-bottom: 80px;
5
        margin-left: 50px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1"></div>

Efecto:

Efecto del ejemplo

Relleno (Margen interior)

El relleno (padding) se refiere al espacio entre el contenido interno de un elemento y el borde del elemento. El relleno se puede usar para ajustar la distancia entre el contenido interno y el borde, afectando el tamaño y el diseño del elemento. El relleno hereda el color de fondo del elemento y afecta el tamaño real del elemento. No admite valores negativos, la unidad puede ser píxeles (px), porcentaje (%), em, etc.

Ejemplo:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        padding: 3%;
7
        background-color: blue;
8
    }
9
    .example2 {
10
        padding: 10px 50px ;
11
        background-color: green;
12
    }
13
    .example3 {
14
        padding: 10px 20px 30px 40px;
15
        background-color: red;
16
    }

1
    <div class="base example1">Prueba de padding</div>
2
    <br>
3
    <div class="base example2">Prueba de padding</div>
4
    <br>
5
    <div class="base example3">Prueba de padding</div>

Efecto:

Efecto del ejemplo Se puede usar padding-top, padding-right, padding-bottom, padding-left para establecer el relleno de una dirección específica individualmente.

Ejemplo:

1
    .example1 {
2
        padding-top: 20px;
3
        padding-right: 50px;
4
        padding-bottom: 80px;
5
        padding-left: 10px;
6
        background-color: blue;
7
        width: 200px;
8
        height: 200px;
9
    }

1
    <div class="example1">Prueba de padding</div>

Efecto: Efecto del ejemplo

Márgenes

Margen (Margen exterior)

Relleno (Margen interior)

Comentarios