In which scenarios "box-sizing" property should be used ? Is it mandatory property to be used?

#1

I’m learning web development and atm very much confused with CSS part.

Question 1: I tried to google for box-sizing property; it only gives info about this property but doesn’t inform in which scenarios I should use it and which scenario I shouldn’t ?

Is it mandatory property to be used or optional ?

Question 2: Are there any CSS good practices which states these many properties must be present under css file ?

1 Like
#2

Hello there, every single css properties are used according to what you as a developer want your webpage to appear like i.e its all down to your preference and not mandatory. You can use box-sizing: border-box when you want the total height and width of an element to be inclusive of the padding and margin. So if you put an elements padding to be 20px and the width to be 300px, then the actual width when using border-box will be 260px but content-box is 340px. box-sizing basically helps you know the actual width you are working with and in responsiveness.

1 Like
#3

As an analogy you can think of it as painting on the wall. content-box presumes width of the painting as width of the canvas only without border, and border-box includes border. Most people find the latter much more useful and easier to reason about (including me), but unfortunately the default behaviour is set to content-box and therefore you can often see this rule on many websites:

* {
  box-sizing: border-box;
}

This rule sets border-box sizing for all elements on the page

#4

With that being said, it is definitely an important rule that you have to always keep in mind as it may mess with the layout of the page in pretty nasty way (particularly when you set relative dimensions like 50% and use border at the same time)

1 Like
#5

just adding to what already explained above by others.

1 Like