Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 88 vistas

    CSS Borde Margen Relleno

    Cargado por

    Renzo Flores Gomez
    Este documento explica las propiedades de borde, relleno y margen en CSS. Define el relleno como el espacio entre el contenido y el borde, el borde como el estilo y color alrededor del elemento, y el margen como el espacio alrededor del elemento. Proporciona ejemplos de cómo establecer estas propiedades para un div usando valores individuales y shorthand.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd

    CSS Borde Margen Relleno

    Cargado por

    Renzo Flores Gomez
    88 vistas3 páginas
    Este documento explica las propiedades de borde, relleno y margen en CSS. Define el relleno como el espacio entre el contenido y el borde, el borde como el estilo y color alrededor del elemento, y el margen como el espacio alrededor del elemento. Proporciona ejemplos de cómo establecer estas propiedades para un div usando valores individuales y shorthand.

    Descripción original:

    CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento explica las propiedades de borde, relleno y margen en CSS. Define el relleno como el espacio entre el contenido y el borde, el borde como el estilo y color alrededor del elemento, y el margen como el espacio alrededor del elemento. Proporciona ejemplos de cómo establecer estas propiedades para un div usando valores individuales y shorthand.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    88 vistas3 páginas

    CSS Borde Margen Relleno

    Cargado por

    Renzo Flores Gomez
    Este documento explica las propiedades de borde, relleno y margen en CSS. Define el relleno como el espacio entre el contenido y el borde, el borde como el estilo y color alrededor del elemento, y el margen como el espacio alrededor del elemento. Proporciona ejemplos de cómo establecer estas propiedades para un div usando valores individuales y shorthand.

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Descargar como docx, pdf o txt
    Está en la página 1de 3

    CSS.

    Entender las propiedades de


    borde, margen y relleno
    Autor: Chris Diaz
    Publicada:noviembre 24, 2011
    Relacin:Styling
    Complejidad:Low

    Etiquetas: border, css, margin, padding

    Este tutorial le ayudar a comprender mejor las propiedades de borde (border), relleno (padding) y
    margen (margin) de CSS. Estas propiedades ayudan mucho a los desarrolladores a colocar elementos en
    la pgina web de la manera necesaria.

    Vamos a crear un div y asignar las propiedades de margen, relleno y borde.

    Propiedad de Padding (relleno)


    Las propiedades de relleno de CSS definen el espacio entre el elemento de borde y el elemento de
    contenido. Se puede definir el valor de relleno de la siguiente manera:

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

    Tambin puede utilizar la propiedad:

    padding:25px 50px 75px 100px;


    o padding superior es 25px
    o padding derecho es 50px
    o padding bajo es 75px
    o padding izquierdo es 100px
    padding:25px 50px 75px;
    o padding superior es 25px
    o padding derecho y padding izquierdo son 50px
    o padding bajo es 75px

    padding:25px 50px;
    o padding superior y padding bajo son 25px
    o padding derecho y padding izquierdo son 50px

    padding:25px;
    o todos paddings son 25px

    En otras palabras, tenemos el elemento div con la clase de div-1:

    ?
    1 div.div-1{
    2 width:150px;
    3 padding: 25px;}

    La anchura del navegador agrega los valores de relleno izquierdo y derecho al ancho del cuadro. Como
    resultado, Usted ver el cuadro de 200 pxeles de ancho.

    Propiedad de Border (borde)


    Las propiedades de borde de CSS le permiten especificar el estilo y el color del borde del elemento.

    border-width (anchura de borde)


    La propiedad border-width es utilizada para configurar el ancho de borde. El ancho es especificado en
    pxeles, o por medio de uno de los tres valores predefinidos: thin, medium, o thick.

    border-color (color de borde)


    La propiedad border-width es utilizada para configurar el color de borde. Se puede configurar color por:

    name specify a color name, like red


    RGB specify a RGB value, like rgb(255,0,0)
    Hex specify a hex value, like #ff0000

    border-style (estilo de borde)

    dotted: Define un borde punteado


    dashed: Define un borde de rayas
    solid: Define un borde slido
    double: Define dos bordes. El ancho de dos bordes es el mismo que el valor border-width
    groove: Define un borde estriado (grooved) 3D. El efecto depende del valor de border-color
    ridge: Define un borde puntiagudo (ridged) 3D. El efecto depende del valor de border-color
    inset: Define un borde de inset 3D. El efecto depende del valor de border-color
    outset: Define un borde de outset 3D. El efecto depende del valor de border-color

    Con la ayuda de la propiedad shortand puede definir el borde del elemento de la siguiente manera:
    ?
    1 div.div-2{
    2 border:1px solid #ccc;
    3 }

    Propiedad de Margin (margen)


    Las propiedades de margen de CSS define el espacio alrededor de elementos. El margen limpia un rea
    alrededor de un elemento (fuera de borde). El margen no tiene color de fondo, y es completamente
    transparente.

    Se puede definir el margen de valores de elementos de la siguiente manera:

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

    Tambin puede utilizar la propiedad shortand:

    margin:25px 50px 75px 100px;


    o margen superior es 25px
    o margen derecho es 50px
    o margen inferior (bajo) es 75px
    o margen izquierdo es 100px

    margin:25px 50px 75px;


    o margen superior es 25px
    o margen derecho y margen izquierdo son 50px
    o margen inferior (bajo) es 75px

    margin:25px 50px;
    o margen superior y margen inferior (bajo) son 25px
    o margen derecho y margen izquierdo son 50px

    margin:25px;
    o cuatro mrgenes son 25px

    Usando el valor auto de la propiedad de margen se puede centrar el bloque horizontal.

    ?
    1 div.div-3{
    2 margin: 0 auto;
    3 }

    Fuente: https://www.templatemonster.com/help/es/css-understanding-border-margin-and-
    padding-properties.html#gref

    También podría gustarte