Propiedades CSS dimensión
02-08-2022

height
margin
margin-bottom
margin-left
margin-right
margin-top

max-height
max-width
min-height
min-width
padding
padding-bottom

padding-left
padding-right
padding-top
width

height 03-08-2022

Establece la altura de un elemento.

La propiedad altura no incluye relleno, bordes o márgenes; Establece la altura del área dentro del relleno, borde y margen del elemento

Nota: Las propiedades min-height y max-height anulan la altura.

Posibles valores: tamaño (px, pc, pt, mm, cm, in) | auto | inherit

auto - El navegador calcula la altura. Esto es el predeterminado.
longitud - Define la altura en px, cm, etc.
% - Define la altura en porcentaje del bloque que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

height: auto;

<html>
<head>
<style>
    img {
        height: auto;
        width: 150px;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad height<h2>
    <img src="URL-de-imagen"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad height

Define el alto de un elemento.

Arriba ... ⇑

margin 03-08-2022

Como dejar un márgen alrededor de un elemento con medidas o porcentajes. Se utiliza para definir el ancho del espacio que se encuentra entre el borde de un elemento y el elemento cercano a el.

Esta propiedad define el ancho del margen para los cuatro lados de la caja.

Sintaxis: selector { margin : valor }

Posibles valores: longitud | % | auto | inherit

La propiedad margin es tan poderosa que permite establecer uno, dos, tres o los cuatro márgenes de forma simultánea.

Si se indica:
- Un valor: Establece el mismo valor a todos los márgenes de un elemento.
- Dos valores: El primero hace referencia a los márgenes verticales y el segundo es el valor de los márgenes horizontales.
- Tres valores: El primero hace referencia al margen superior, el segundo es el valor de los márgenes horizontales y el tercero es el margen inferior.
- Cuatro valores: El primero es el margen superior, el segundo es el margen derecho, el tercero es el margen inferior y el cuarto es el margen izquierdo.

Valores de propiedad:

longitud - Especifica un margen en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un margen en porcentaje del ancho del elemento que contiene.
auto - El navegador calcula un margen.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

margin: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
    }
    img { margin: 0; }
</style>
</head>
<body>
<div>
    <h2>Propiedad margin<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad margin

Arriba ... ⇑

margin-bottom 03-08-2022

Establece el margen inferior de un elemento. Se permiten valores negativos.

Sintaxis: selector { margin-bottom : valor }

Posibles valores: longitud | % | auto | inherit

Valores de propiedad:

longitud - Especifica un margen inferior fijo en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un margen inferior en porcentaje del ancho del elemento que contiene.
auto - El navegador calcula un margen inferior.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

margin-bottom: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
    }
    img { margin-bottom: 0; }
</style>
</head>
<body>
<div>
    <h2>Propiedad margin-bottom<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad margin-bottom

Arriba ... ⇑

margin-left 03-08-2022

Establece el margen izquierdo de un elemento. Se permiten valores negativos.

Sintaxis: selector { margin-left : valor }

Posibles valores: longitud | % | auto | inherit

Valores de propiedad:

longitud - Especifica un margen izquierdo fijo en px, pt, cm, etc. El valor predeterminado es 0px.
% - Especifica un margen izquierdo en porcentaje del ancho del elemento que contiene.
auto - El navegador calcula un margen izquierdo.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

margin-left: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
    }
    img { margin-left: 0; }
</style>
</head>
<body>
<div>
    <h2>Propiedad margin-left<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad margin-left

Arriba ... ⇑

margin-right 03-08-2022

Establece el margen derecho de un elemento. Se permiten valores negativos.

Sintaxis: selector { margin-right : valor }

Posibles valores: longitud | % | auto | inherit

Valores de propiedad:

longitud - Especifica un margen derecho fijo en px, pt, cm, etc. El valor predeterminado es 0px.
% - Especifica un margen derecho en porcentaje del ancho del elemento que contiene
auto - El navegador calcula un margen derecho
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

margin-right: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
    }
    img { margin-right: 0; }
</style>
</head>
<body>
<div>
    <h2>Propiedad margin-right<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad margin-right

Arriba ... ⇑

margin-top 03-08-2022

Establece el margen superior de un elemento. Se permiten valores negativos.

Sintaxis: selector { margin-top : valor }

Posibles valores: longitud | % | auto | inherit

Valores de propiedad:

longitud - Especifica un margen superior fijo en px, pt, cm, etc. El valor predeterminado es 0px.
% - Especifica un margen superior en porcentaje del ancho del elemento que contiene.
auto - El navegador calcula un margen superior
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

margin-top: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
    }
    img { margin-top: 0; }
</style>
</head>
<body>
<div>
    <h2>Propiedad margin-top<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad margin-top

Arriba ... ⇑

max-height 03-08-2022

Se utiliza para establecer la altura máxima de un elemento.

Esto evita que el valor de la propiedad de altura sea mayor que la altura máxima.

Nota: El valor de la propiedad max-height reemplaza la de height.

Posibles valores: tamaño (px, pc, pt, mm, cm, in) | none | inherit

none - No hay altura máxima. Esto es el predeterminado.
longitud - Define la altura máxima en px, cm, etc.
% - Define la altura máxima en porcentaje del bloque que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

max-height: none;

<html>
<head>
<style>
    img {
        height: none;
        width: auto;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad max-height<h2>
    <img src="URL-de-imagen" width="136" height="100"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad max-height

Define la altura máxima de un elemento.

Arriba ... ⇑

max-width 03-08-2022

Se utiliza para establecer el ancho máximo de un elemento.

Esto evita que el valor de la propiedad width pase a ser mayor que max-width.

Nota: El valor de la propiedad max-width anula el width.

Posibles valores: tamaño (px, pc, pt, mm, cm, in) | none | inherit

none - No hay ancho máximo. Esto es el predeterminado
longitud - Define el ancho máximo en px, cm, etc.
% - Define el ancho máximo en porcentaje del bloque que contiene
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

max-width: none;

<html>
<head>
<style>
    img {
        height: auto;
        max-width: none;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad max-width<h2>
    <img src="URL-de-imagen" width="136" height="100"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad max-width

Define el ancho máximo de un elemento.

Arriba ... ⇑

min-height 03-08-2022

Se utiliza para establecer la altura mínima de un elemento. Esto evita que el valor de la propiedad height sea más pequeño que min-height.

Nota: El valor de la propiedad min-height anula tanto a max-height como a height.

Posibles valores: tamaño (px, pc, pt, mm, cm, in) | inherit

longitud - El valor predeterminado es 0. Define la altura mínima en px, cm, etc.
% - Define la altura mínima en porcentaje del bloque que contiene
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

min-height: 0;

<html>
<head>
<style>
    img {
        min-height: 0;
        width: auto;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad min-height<h2>
    <img src="URL-de-imagen" width="136" height="100"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad min-height

Define la altura mínima de un elemento.

Arriba ... ⇑

min-width 03-08-2022

Se utiliza para establecer el ancho mínimo de un elemento. Esto evita que el valor de la propiedad width sea menor que min-width.

Nota: El valor de la propiedad min-width anula tanto el max-width como el width.

Posibles valores: tamaño (px, pc, pt, mm, cm, in) | inherit

longitud - El valor predeterminado es 0. Define el ancho mínimo en px, cm, etc.
% - Define el ancho mínimo en porcentaje del bloque que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

min-width: 0;

<html>
<head>
<style>
    img {
        height: auto;
        min-width: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad min-width<h2>
    <img src="URL-de-imagen" width="136" height="100"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad min-width

Define la ancho mínimo de un elemento.

Arriba ... ⇑

padding 03-08-2022

La propiedad padding abreviada establece todas las propiedades de relleno en una declaración. Esta propiedad puede tener de uno a cuatro valores.

Esta propiedad define el ancho para los cuatro lados de la caja.

La propiedad padding es tan poderosa que permite establecer uno, dos, tres o los cuatro rellenos de forma simultánea.

Si se indica:
- Un valor: Establece el mismo valor a todos los rellenos de un elemento.
- Dos valores: El primero hace referencia a los rellenos verticales y el segundo es el valor de los rellenos horizontales.
- Tres valores: El primero hace referencia al relleno superior, el segundo es el valor de los rellenos horizontales y el tercero es el relleno inferior.
- Cuatro valores: El primero es el relleno superior, el segundo es el relleno derecho, el tercero es el relleno inferior y el cuarto es el relleno izquierdo.

Sintaxis: selector { padding : valor }

Posibles valores:

longitud - Especifica el relleno en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica el relleno en porcentaje del ancho del elemento que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

padding: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
        padding: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad padding<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad padding

Arriba ... ⇑

padding-bottom 03-08-2022

La propiedad padding-bottom establece el relleno inferior (espacio) de un elemento. No se permiten valores negativos.

Sintaxis: selector { padding-bottom : valor }

Posibles valores:

longitud - Especifica un relleno inferior fijo en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un relleno inferior en porcentaje del ancho del elemento que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

padding-bottom: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
        padding-bottom: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad padding-bottom<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad padding-bottom

Arriba ... ⇑

padding-left 03-08-2022

La propiedad padding-left establece el relleno izquierdo (espacio) de un elemento. No se permiten valores negativos.

Sintaxis: selector { padding-left : valor }

Posibles valores:

longitud - Especifica un relleno izquierdo fijo en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un relleno izquierdo en porcentaje del ancho del elemento que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

padding-left: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
        padding-left: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad padding-left<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad padding-left

Arriba ... ⇑

padding-right 03-08-2022

La propiedad padding-right establece el relleno derecho (espacio) de un elemento. No se permiten valores negativos.

Sintaxis: selector { padding-left : valor }

Posibles valores:

longitud - Especifica un relleno derecho fijo en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un relleno derecho en porcentaje del ancho del elemento que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

padding-right: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
        padding-right: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad padding-right<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad padding-right

Arriba ... ⇑

padding-top 03-08-2022

La propiedad padding-top establece el relleno superior (espacio) de un elemento. No se permiten valores negativos.

Sintaxis: selector { padding-left : valor }

Posibles valores:

longitud - Especifica un relleno superior fijo en px, pt, cm, etc. El valor predeterminado es 0.
% - Especifica un relleno superior en porcentaje del ancho del elemento que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

padding-top: 0;

<html>
<head>
<style>
    h2 { text-align: center; }
    table { margin: auto; }
    td {
        border: 1px solid black;
        background: #6a6b0e;
        padding-top: 0;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad padding-top<h2>
    <table border="0" align="center">
        <tr>
            <td><img src="URL de imagen"/></td>
        </tr>
    </table>
</div>
</body>
</html>

Propiedad padding-top

Arriba ... ⇑

width 03-08-2022

Define el ancho de un elemento.

La propiedad width no incluye relleno, bordes o márgenes; Establece el ancho del área dentro del relleno, borde y margen del elemento.

Nota: Las propiedades de min-width y max-width anulan el ancho.

Sintaxis: width: auto | valor | initial | inherit;

Posibles valores:

auto - Valor por defecto. El navegador calcula el ancho.
longitud - Define el ancho en px, cm, etc.
% - Define el ancho en porcentaje del bloque que contiene.
initial - Establece esta propiedad a su valor predeterminado.
inherit - Hereda esta propiedad de su elemento padre.

width: auto;

<html>
<head>
<style>
    img {
        height: 100px;
        width: auto;
    }
</style>
</head>
<body>
<div>
    <h2>Propiedad width<h2>
    <img src="URL-de-imagen"/>
    <p>texto</p>
</div>
</body>
</html>

Propiedad width

Define el ancho de un elemento.

Arriba ... ⇑

Propiedades CSS dimensión02-08-2022

height 03-08-2022

height: auto;

Propiedad height

margin 03-08-2022

margin: 0;

Propiedad margin

margin-bottom 03-08-2022

margin-bottom: 0;

Propiedad margin-bottom

margin-left 03-08-2022

margin-left: 0;

Propiedad margin-left

margin-right 03-08-2022

margin-right: 0;

Propiedad margin-right

margin-top 03-08-2022

margin-top: 0;

Propiedad margin-top

max-height 03-08-2022

max-height: none;

Propiedad max-height

max-width 03-08-2022

max-width: none;

Propiedad max-width

min-height 03-08-2022

min-height: 0;

Propiedad min-height

min-width 03-08-2022

min-width: 0;

Propiedad min-width

padding 03-08-2022

padding: 0;

Propiedad padding

padding-bottom 03-08-2022

padding-bottom: 0;

Propiedad padding-bottom

padding-left 03-08-2022

padding-left: 0;

Propiedad padding-left

padding-right 03-08-2022

padding-right: 0;

Propiedad padding-right

padding-top 03-08-2022

padding-top: 0;

Propiedad padding-top

width 03-08-2022

width: auto;

Propiedad width

Propiedades CSS dimensión
02-08-2022