Understanding Box Model

Tweet

Any element like a text, image or video in HTML is actually made up of an imaginary box. HTML gives the developers to adjust the size of the box accordingly to the other box elements to fit into a webpage. This can be done by three selectors,

1. Border
2. Padding
3. Margin

1.Border

The border is the only selector, which can be made visible to the users eye with some style properties. The three aspects to do that are width, style and color. By default, the border is just an invisible line, but can actually made visible placed between padding and margin.

2.Padding

Padding spaces the content(text, image, video, etc...) from the border. This selector helps the border not to be congested with the content. From the above picture, you can see that padding is an imaginary space, and therefore the background color in the content is also spread over the padding space.

3.Margin

Margin is similar to padding, except that the space appears outside the border. This is useful in spacing the box from other boxes in a webpage. This is also an imaginary space, and so the color you see in the margin region is the background color applied to the body element.