teffcode/css-quiz-box-sizing.md

## css-quiz-box-sizing.md

      
    Raw
  

              css-quiz-box-sizing.md
            
          
    👋🏼 Welcome 👋🏼


      Instagram |
      Twitter |
      LinkedIn


Choose your language 👅


English
Spanish


English version 🚀


What would be the indicated box model for the following code (HTML and CSS): A or B?


  Click here to see the correct answer and explanation 👀
  

Correct Answer
Explanation


B
If box-sizing: border-box property is set, the width and height property is applied to the entire element. The content section is calculated after including the padding and border so the width of the entire child element is 50px with a content width 100px, padding of 20px and 2px of border. The height of the content is now calculated to be 0 because the 20px padding on top and bottom satisfy the 20px height requirement.


Explicación basada en 👉🏼 1 Weird CSS Property You Should Use In Your Next Web Project

Code:
HTML:
<!DOCTYPE html>
<html>
<head>
  <title>🐰</title>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      background: pink;
      border: 1px solid hotpink;
      height: 20px;
      padding: 20px;
      width: 100px;
    }
  </style>
</head>
<body>
	<div>👷🏻‍♀️ Deep Work</div>
</body>
</html>


Spanish version 🚀 


¿Cuál sería el modelo de caja indicado para el siguiente código (HTML y CSS): A o B?


  Haz click aquí para ver la respuesta correcta y su explicación 👀 
  

Respuesta correcta
Explicación


B
Si se establece la propiedad box-sizing: border-box, las propiedades width y height se aplican a todo el elemento (incluyendo padding y border). Esto quiere decir que el width de la sección de contenido (cajita azul interna) se calcula después de incluir el padding y el border a la medida del width total, por lo que, si el width de todo el elemento es de 100px, le restamos 40px del padding (20px a cada lado) y 2px del border (1px a cada lado), dando como resultado un contenido de 58px. La altura del contenido se calcula de la misma forma: al height total de 40px le restamos el padding de 40px (20px arriba y abajo) y el border de 2px (1px arriba y abajo) y nos da como resultado un número negativo que se interpreta como 0 en el modelo de caja.


Explicación basada en 👉🏼 1 Weird CSS Property You Should Use In Your Next Web Project

Código completo:
HTML:
<!DOCTYPE html>
<html>
<head>
  <title>🐰</title>
  <style>
    * {
      box-sizing: border-box;
    }

    div {
      background: pink;
      border: 1px solid hotpink;
      height: 20px;
      padding: 20px;
      width: 100px;
    }
  </style>
</head>
<body>
	<div>👷🏻‍♀️ Deep Work</div>
</body>
</html>