La programación no es una tarea fácil y aprender CSS, tampoco. Las clases de programación ayudan a los estudiantes a comprender mejor estos lenguajes. Pero hoy, os ayudaré con el siguiente aspecto: ¿Cómo separar los elementos de un borde?
El hecho de que no es un lenguaje de programación que es algo muy visual y que los nombres de las propiedades son muy intuitivos, pueden hacernos pensar que si ponemos margin-left: 10px, la caja en cuestión se moverá 10 píxeles a la izquierda, cuando no siempre será así.
En este post, os quiero explicar como no caer en una de esas típicas y como evitarlas.
Imagina que tenemos una caja verde de 100px x 100px tal que así:
Dentro de esta caja, añadimos un texto "El texto" dentro de la caja y queremos que se separe 10px del borde de arriba.
Para ello simplemente, según podemos saber sobre el box-model, para separar el contenido dentro de un elemento necesitamos aplicarle un padding al padre.
Si aplicamos padding-top: 10px, lo que querríamos que sucediera, sería lo siguiente:
Pero lo que vemos es esto:
Deja de ser un cuadrado de 100x100 para ser un rectángulo de 100x110.
¿Por qué?
Como ya comente, al ser visual y su sintaxis muy intuitiva, parece que solo con eso debería funcionar, pero en el orden natural de CSS cuando añadimos un padding y el elemento tiene un width o height este lo suma. En este caso hace 100px de height + 10px de padding.
No queremos que sume, solo queremos se desplace. Para esto usaremos el atributo box-sizing: border-box.
Con esta propiedad le decimos a css que no sume a la altura o el ancho el padding, sino que este es parte de él.
Con saber simplemente que por defecto CSS sumara el padding al tamaño del elemento y que lo podemos evitar con box-sizing: border-box ya nos quitaremos un gran sufrimiento cuando empezamos a maquetar html y css y este se nos va de las manos.
