Whether you are a designer or a developer or into technology as a whole, there are some vital things that apply to each and every one of us.
The concept of the box model has been on for a long period of time, so having learnt and gained useful knowledge on the subject, I feel it necessary to share it to developers.
In this article I will be focusing on the major differences between content, padding , margin and border in the simplest way possible for front-end developers, but no matter your role feel free to read.
The Box Model: The CSS box model describes the rectangular boxes that wrap around every element(HTML elements) in the document tree and laid out according to the visual formatting model. It consist of content, padding,border and margin.
The Architecture: The content is surrounded by the border, the space between the content and the border is called the padding, while the space between the border and the other elements in the document is called the margin.
It’s like a bed in a room, the bed is the content, the space between the bed and the four walls of the room is the padding and the four walls of the room is the border then the space between that room and another room in a house is the margin
- bed = content;
- space between bed and and walls = padding;
- walls = border;
- space between that room and another room = margin;
- room = element{e.g
<p><img><div>}.
Lets do this the front-end way
THE CONTENT: The content is what is contained in the element tag. For instance, if you have this: <p>Nedy</p> . the content of this tag is “Nedy” . On default all content are always top-left aligned(meaning their padding left and padding top is less that their padding right and padding bottom).
THE PADDING: The padding is the space between the content of an element and the border of that same element, or we can simply say the space inside the border. This is similar to the spaces between your bed and the wall of your room. Most times we do not seem to see the padding because it is usually transparent by default but if you set your background-color: lightgray; , the padding of that element will be gray like in the picture below.
Padding only has 5 CSS attributes: padding; padding-top; padding-right; padding-bottom; padding-left.
THE BORDER: This is the wall that surrounds the element, and it distinguishes from any other element in the doc. This is the same way the walls of your room separates it from the kitchen. The border can actually be removed, or the style changed. One significant difference between border and padding is that, a border is not a space, it is a border in every sense of the word, hence the flexibility in style. We all know we cannot change the style of a space because a space is a space. The border has a few more attributes than padding and margin. So here we will try to make our border solid and dashed , by setting our CSS border property to border: 2px solid green; and border: 2px dotted red;
Some frequently used border CSS properties: border; border-top; border-right; border-style; border-width; border-radius;.
The border radius property reduces the degree of the four angles formed by the intersection of the borders from 90deg depending on the value of the border-radius at that time. Check out W3schools.com for more.
Finally the margin Pheeww!!!
THE MARGIN: The margin is the space between two elements, or we can simply say the space outside the border of an element. Most times if not all, the margin assumes the color of the root element which is most likely the
or tags or any actual root element.It is safe to say that horizontal space between two elements is made up of two margins; the margin-right of the first element and the margin-left of the second element. Same things goes for the vertical space between two elements. Checkout W3.org for more.
The space outside the green border is the margin of that <p> element. Same thing goes for the space outside the red border.
We can finally say that:
Content is contained in a Border, and the space inside that border is the padding while the space outside of it is the margin. This makes up the Box Model.
I hope this article helps you understand the *Box Model Concept * better.
Do not forget to comment and share your thoughts too. One love.
Top comments (2)
nice one and good content write up on box model
Nice one. Thanks for the explanation