Web

Box Model in CSS | CSS Tutorial -Part 5

BoxModel

CSS box model is box which is surrounds all the tags in HTML with content, padding, margin and border. If you see above box , inner most blue part represents contents, green is padding , then border and then margin. We as a developer can set these values  as per our design.

Detailed explanation of these terms:

  1. Content -Content appears in the center of the box. It is the place where text and images appear
  2. Padding – Padding is used to clears an area around the content and make some space. The padding is transparent
  3. Border – A border that covers the padding and content
  4. Margin – Margin clears an area outside the border. The margin is also transparent.

We can describe this as below:

#centreDoc {
padding: 0 ;
margin-top: 40px;
margin-left: 100px;
width: 750px;
}

<body id=”centreDoc”>

<!– Content –>

</body>

In order to set height, width of the box properly you need to understand below maths for this: Total width of an element should be calculated as below:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

In our case it will be:

Total element width =  750px + 0 px+0px + 0px +0px+100px+0px = 850px

See in the below example where page is divided in 2 blocks i.e. navbar and centerdoc

Box model

The highlighted orange part is div and above that there is nav tag.

More information can be collected from https://www.w3schools.com/css/css_boxmodel.asp

 

Advertisements

One thought on “Box Model in CSS | CSS Tutorial -Part 5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s