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;}
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:-
- 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
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; }
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
+ 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