CSS box model, Padding, Margin and Box-sizing

In css, all elements are placed in boxes. this is called box model.

Margin refers to the distance between the boxes.

Padding refers to the distance between the content and box edge.

By default, when we set the height and width of the element, the padding is also included. meaning if you have element like this:

the actual size will become 300px by 300px, because additional 100px is added to the content from each side. To prevent this, and set height and width such that padding and border is included, use

 

source: https://www.w3schools.com/css/css3_box-sizing.asp

https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css

Leave a Reply

Your email address will not be published. Required fields are marked *