CSS Box Model

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 with 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

Margin

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.

Padding

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, padding-left to set margins for top, bottom, and right, left respectively.

Border

It is visible around the padding and content.

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
Studyopedia Editorial Staff
[email protected]

We work to create free tutorials for all.

No Comments

Post A Comment