EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Buenas prácticas CSS
            Buenas prácticas CSS
            12/10/2019
            Posición y comportamiento de contenedores en CSS
            Posición y comportamiento de contenedores en CSS
            12/10/2019

            Modelo de cajas: márgenes, relleno y bordes

            Modelo de cajas margenes relleno bordes

            Tabla de contenidos

            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 13.1. Padding o relleno
            • 13.2. Margin
            • 13.3. Bordes

            13. Modelo de cajas: márgenes, relleno y bordes

            Cualquier elemento incluido en un documento HTML dispone de una estructura tipo caja que se puede modificar usando las propiedades CSS. Las propiedades más importantes de las cajas o contenedores son las siguientes: margin, border y padding.

            Las propiedades operan en el siguiente orden: superior, derecha, inferior e izquierda.

            Propiedades CSS contenedores

            13.1. Padding o relleno

            Tabla 13.1: Padding
            Propiedad Descripción Valores
            padding-top padding-right padding-bottom padding-left Tamaño del relleno superior, derecho, inferior e izquierdo longitud | porcentaje
            padding Tamaño del relleno longitud | porcentaje {1,4}

            Valores del padding (también aplicables a la propiedad margin):

            • Un valor: se aplica el estilo a los 4 lados.
            • Dos valores: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
            • Tres valores: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
            • Cuatro valores: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. 

            Ejemplo Padding

            div.a {
               padding-top: 30px;
               padding-bottom: 80px;
               padding-right: 50px;
               padding-left: 40px;
               border: 1px solid black;
               background-color: azure;
             }
             div.b { /Propiedad corta/
               padding: 30px 50px 80px 40px;
               border: 1px solid black;
               background-color: darkseagreen;
             }

            0


            13.2. Margin

            Tabla 13.2: Margin
            Propiedad Descripción Valores
            margin-top margin-right margin-bottom margin-left Tamaño del margen superior, derecho, inferior e izquierdo longitud | porcentaje | auto
            margin Ancho de los márgenes longitud | porcentaje | auto {1,4}

            Ejemplo margin

            div.a {
               margin-top: 30px;
               margin-bottom: 80px;
               margin-right: 50px;
               margin-left: 40px;
               border: 1px solid black;
               background-color: azure;
             }
             div.b { /* Propiedad corta */
               margin: 30px 80px 50px 40px;
               border: 1px solid black;
               background-color: darkseagreen;
             }

            0


            13.3. Bordes

            Tabla 13.3: Bordes
            Propiedad Descripción Valores
            border-top-width border-right-width border-bottom-width border-left-width Anchura del borde superior, derecho, inferior o izquierdo thin | medium | thick | longitud
            border-width Anchura del borde (reducida) thin | medium | thick | longitud {1,4}
            border-top-color border-right-color border-bottom-color border-left-color Color del borde superior, derecho, inferior e izquierdo color | transparent
            border-color Color del borde (reducida) color | transparent {1,4}
            border-top-style border-right-style border-bottom-style border-left-style Estilo del borde superior, derecho, inferior e izquierdo none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
            border-style Estilo del borde (reducida) none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
            border-top border-right border-bottom border-left Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo border-top-width | border-top-style | border-top-color
            border Ancho, estilo y color para los bordes (reducida) border-width | border-style | border-color
            border-radius Curvatura del borde longitud | porcentaje {1,4}

            **Las propiedades del borde no tendrán efecto hasta que se defina la propiedad border-style.

            Ejemplo border

            .a { border: 4px solid blue; }
            .b { border: 6px dotted green; }
            .c { border: 3px dashed purple; }
            .d { 
                 border-top: 3px double orange;
                 border-right: 3px double brown;
                 border-bottom: 3px double brown;
                 border-left: 3px double brown;
             }

            0

            Ejemplo border-radius

            .a { background-color: blue; border-radius: 20px 20px 0 0; height:100px; width: 100px;}
            .b { background-color: green; border-radius: 0 0 40px 40px; height:100px; width: 100px;}
            .c { background-color: purple; border-radius: 50px; height:100px; width: 100px;}

            dark

            Comprueba tu aprendizaje

            El padding o relleno...

            ¡Bien! ¡Has fallado!

            ¿Qué orden seguimos en las propiedades cortas?

            ¡Bien! ¡Has fallado!

            ¿Cómo establecemos un borde punteado de color verde de 5 px?

            ¡Bien! ¡Has fallado!

            Establece un margen de 20px:

            ¡Bien! ¡Has fallado!

            Según la siguiente definición "padding: 20px 30px 40px 50px;" ¿Cuántos píxeles tiene el padding o relleno inferior?

            ¡Bien! ¡Has fallado!

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results