Box Model in CSS Program | CSS Box Model Parts

byEduGyan September 14, 2021

Box Model in CSS Program - CSS Box Model with Example - CSS Box Model Parts - CSS Padding Margin Border Difference


css box model


Box Model in CSS:

Box Model in CSS Program is a box that contains Content, Padding, Border, and Margin. These are the parts of box model which used to arrange the actual content in the webpage/website.

About Parts:

  • Content - This is the content of the box model, where text, images, videos etc. appear
  • Padding - Padding is another part of box model that is transparent and clears an area around the content.
  • Border - A border that goes around or upper the padding and content with different types of borders.
  • Margin - Margin is similar to Padding that is also transparent and clears an area outside the border.

CSS Padding:

CSS Padding is used to clear an area around the content with specified direction like top, right, bottom and left.

Padding has the different different length that we can mention and makes a transparent spaces around the content. We can define the lengths for padding in px, pt, cm, and %.

For example:

div {
  padding-top: 40px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px;
}

If we want to clear or generate an area around the content in the particular sides according to user or client then we can set the above CSS properties that clears area from top, right, bottom and left.

To reduce line of code for the padding, we can set the properties like as-

padding: 40px 30px 40px 50px;

In this:
top padding is 40px
right padding is 30px
bottom padding is 40px
left padding is 50px

If padding property has 3 values then:

padding: 40px 50px 70px;

In this:
top padding is 40px
right and left paddings are 50px
bottom padding is 70px

If padding property has 2 values then:

padding: 30px 70px;

In this:
top and bottom paddings are 30px
right and left paddings are 70px

If padding property has 1 value then:

padding: 30px;

In this:
all four paddings are 30px

CSS Border:

CSS border that goes around or upper the padding and content with different types of borders. It has different different border styles that we can set around the padding and content.

CSS Border Styles:

The border-style property sets the border that we want to display with border-color.

  • dotted - Sets a dotted border
  • dashed - Sets a dashed border
  • double - Sets a double border
  • none - Sets no border
  • hidden - Sets a hidden border
  • inset - Sets a 3D inset border
  • outset - Sets a 3D outset border
  • groove - Sets a 3D grooved border
  • ridge - Sets a 3D ridged border
  • solid - Sets a solid border

For example:

p.dotted {border-style: dotted; border-color: red;}
p.dashed {border-style: dashed; border-color: red;}
p.solid {border-style: solid; border-color: red;}
p.double {border-style: double; border-color: red;}
p.none {border-style: none; border-color: red;}
p.hidden {border-style: hidden; border-color: red;}
p.groove {border-style: groove; border-color: red;}
p.ridge {border-style: ridge; border-color: red;}
p.inset {border-style: inset; border-color: red;}
p.outset {border-style: outset; border-color: red;}
p.mix {border-style: dotted dashed solid double; border-color: red;}

Border Sides:

p {
  border-top-style: dashed;
  border-right-style: solid;
  border-bottom-style: dashed;
  border-left-style: solid;
}

If border-style property has 4 values then:

border-style: dashed solid double dotted;

In this:
top border is dashed
right border is solid
bottom border is double
left border is dotted

If border-style property has 3 values then:

border-style: dashed solid double;

In this:
top border is dashed
right and left borders are solid
bottom border is double

If border-style property has 2 values then:

border-style: dotted dashed;

In this:
top and bottom borders are dotted
right and left borders are dashed

If border-style property has 1 value then:

border-style: double;

In this:
all four borders are double

CSS Margin:

CSS Margin is used to clear an area outside the border with specified direction like top, right, bottom and left. Margin is also similar to Padding with transparent and has same properties like padding.

Margin has the different different length that we can mention and makes a transparent spaces around the content. We can define the lengths for padding in px, pt, cm, and %.

For example:

div {
  margin-top: 40px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 50px;
}

If we want to clear or generate an area outside the border in the particular sides according to user or client then we can set the above CSS properties that clears area from top, right, bottom and left.

To reduce line of code for the margin, we can set the properties like as-

margin: 40px 30px 40px 50px;

In this:
top margin is 40px
right margin is 30px
bottom margin is 40px
left margin is 50px

If margin property has 3 values then:

margin: 40px 50px 70px;

In this:
top margin is 40px
right and left margins are 50px
bottom margin is 70px

If margin property has 2 values then:

margin: 30px 70px;

In this:
top and bottom margins are 30px
right and left margins are 70px

If margin property has 1 value then:

margin: 30px;

In this:
all four margins are 30px


Looking Forward:


For more details - CSS Box Model with Example - CSS Box Model Parts - Content Padding Border Margin - Padding in Box Model - Margin in Box Model - Border in Box Model - CSS Padding Margin Border Difference - Best Programming Videos on YouTube - EDUGYAN Channel



Tags

Post a Comment

0 Comments