As you might be aware of the fact that CSS is used to style the structure which is provided by HTMl. But how does it actually styles. We don't style entire HTML at once. We take piece of elements and design them separately. Every HTML element like heading,image,butons etc is surrounded by a box and this box is also divided into four parts, Let's talk about them now :
(1)Content:
Content area is the actual area occupied the content such as image,text,links. You can think it as the area your body is occupying in the room. You can make changes in the content area by "width", "min-width", "max-width", "height", "min-height", and "max-height" properties.
(2) Padding:
Next to the content area comes Padding area which acts as blanket to the content. Padding area can be increased and decreased accordingly by the help of "padding-top", "padding-bottom", "padding-right", "padding-left" and simply by "padding" properties
(3) Border:
In real life border is just a line defining the territory or you can notice the border around your images. The CSS border is similar to that. You can define border area properties like "border-radius", "border" properties.
(4) Margin:
"the empty space at the side of a page in a book, etc". This is the meaning I found on google and yes Margin Area is like this only, being the outermost area this empty space is used to separate two different elements. You can define marigin area by "margin-top", "margin-bottom", "margin-right", "margin-left", and simply by "margin" properties
NOTE: This is on the basis of my current understandings
Top comments (2)
Hi,
This is a nice and simple description of the box model (including content) but might have benefited from an illustration.
For this particularly interested in this topic it is worth mentioning padding and margin have some logical shorthand properties (-block)[developer.mozilla.org/en-US/docs/W...] and (-inline)[developer.mozilla.org/en-US/docs/W...].
NOT part of the box-model but there is an overlooked CSS property that can come in very handy for debugging CSS that is outline. It sits outside of the margin but does not take up space so does not impact the flow. It can also be very helpful for accessibility.
Best regards.
Hey! thanks for commenting, As a beginner it is really helpful and informative. I will keep disturbing you with my queries in future.