All HTML components can be considered as boxes. In CSS, the expression "box model" is utilized when discussing plan and design. 

The CSS box display is basically a case that wraps around each HTML component. It comprises of: edges, outskirts, cushioning, and the genuine substance. The picture beneath outlines the crate display:-


Clarification of the diverse parts:-

  • Content - The substance of the box, where content and pictures show up
  • padding - Clears a zone around the substance. The cushioning is straightforward
  • Border - A fringe that circumvents the cushioning and substance 
  • Margin - Clears a zone outside the Border. The Magin is straightforward
The container show enables us to include a border around elements, and to characterize space between elements.

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

Width and Height:-

Keeping in mind the end goal to set the width and height of a element accurately in all browsers, you have to know  how the box model works.

Critical: When you set the width and height properties of a element with CSS, you simply set the width and height of the content zone. To figure the full size of a component, you should likewise include padding, borders and Margin. 

Expect we need to style a <div> component to have an aggregate width of 500px:

div {
    width: 350px;
    padding: 15px;
    border: 7px solid pink;
    margin: 0; 
}

Calculation of the above Example:-

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px


The aggregate width of an element should be computed this way:-

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

The aggregate height of an element should be figured this way:-

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

Note for old IE: internet Explorer 8 and earlier versions, incorporate padding and border in the width property. To fix this issue, add a <!DOCTYPE html> to the HTML page.

0 comments:

Post a Comment

Thanks

 
Blogger Templates1 school © 2013. All Rights Reserved. Powered by Blogger
Top