Question of the day: box-sizing: border-box?

luhan
Membru
Alăturat:
2024-06-24 14:48:13

Image preview

Image preview

What does`box-sizing: border-box` do?

a. Padding and border are included in the element's total width and height

b. Only padding is included in the element's total width and height

c. Only border is included in the element's total width and height

d. Margin, padding, and border are included in the element's total width and height

jenny
Membru
Alăturat: 2025-08-24 15:11:06
2024-06-25 07:47:06
["Question of the day","Question of the day: box-sizing: border-box?"]
jenny
Membru
Alăturat: 2025-08-24 15:11:06
2024-06-25 09:56:57

Margin, padding are beginners night-mares, it will be good if we can have graphical representation for these things! Cant wrap my head around this one o!

luhan
Membru
Alăturat:
2024-06-25 10:06:03

@"jenny"#p485 I know right. It's quite hard to fully understand as a beginner. The box model in Google Chrome developer tools will help in visualizing it. I used it a lot to fully understand margin and padding. Infact I still use it on some occasions.

Facebook X (Twitter) Instagram LinkedIn Telegram WhatsApp