CSS Box Model

When you will develop a website and work around its design, then you surely need to know about the CSS box model. All HTML elements can be related to this model, which consists of margin, border, padding, and content.

Let’s learn about the Box Model, but first, let’s understand it with the below illustration,

CSS Box Model


As you can see above, we have a margin, which defines the space around the content of an element. It has options such as margin-top, margin-bottom, margin-right, and margin-left to set margins for top, bottom, right, and left respectively.


It shows the space between the content the content of an element and its border. It has options such as padding-top, padding-bottom, padding-right, and padding-left to set margins for top, bottom, and right, left respectively.


The border is visible around the padding and content.


Content is what is visible on the website in the form of text, images, gallery, video, etc.

Let’s learn the concept of margins, padding, and border with examples,

Example 1

Here’s the output,

CSS Margins Paddings

Example 2

Now, we will do some changes in padding and margins, and let’s see what happens. We also changed the border size and color.

Here are the changes under the <style> tag,

Here’s the output,

CSS Margins Paddings Borders

CSS Units
CSS Text Properties
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment

Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue reading