Box Model
Any element in an html can be represented via box, which represents the region occupied by that particular element on the web page.
It consists of following
- Margin area = margin left + margin right + margin top + margin bottom
- Border area = border left + border right + border top + border bottom
- Padding area = padding left + padding right + padding top + padding bottom
- Content area
Example
Consider the following HTML code:
<div id='wrapper'>
<div id='content'>
<div class='info'>
<p>Some Dummy Content As OF NOW.</p>
</div>
</div>
</div>
Consider the following Styles:
#content{
background : #f00;
margin : 10px;
padding : 0px;
border: 1px solid #fff;
}
#content .info{
padding :10px;
margin : 10px;
background : #0f0;
border: 2px solid #00f;
}
#content .info p{
background : #F0F0F0;
padding : 0px;
margin : 0px;
border : 0px;
}
HTML output:
Red colour represent the margin area for #info, blue represent the border area, green represent the padding area and white represents its content area.
Total Width (Horizontal space occupied in page) = content Area width + left padding area + right padding area + left border + right border + left margin area+ right margin area.
Total Height (Vertical space occupied in page) = content Area height + top padding area + bottom padding area + top border + bottom border + top margin area+ bottom margin area.
While calculating width or height with jquery
.width() - method gives width of content area
.innerWidth() – method gives value equal to content area width+ left padding + right padding
.outerWidth() – method gives width = content area width + left padding + right padding + left border + right border
.height() - method gives height of content area
.innerHeight() – method gives value equal to content area height + top padding + bottom padding
.outerHeight() – method gives Height = content area height + top padding + bottom padding + top border + bottom border
By default browsers styles are applied and those padding, margin and border values applies in page until unless specified by developer in his style sheet.
Margin in box model
The margin is used to increase spaces between two sibling elements or its parent. It represents the margin area of the elements width.
Margin can take values in percentages or in specific (em or px units). When specified in percentage it is relative to its container width.
Margin cannot be inherited by decedent elements. Margins can hold negative values.
Margin area is transparent it will show the background color or image of container element.
Example
Consider the following HTML code:
<div id='wrapper'>
<div id='content'>
<div class='info'>
<p>this is a paragraph</p>
</div>
</div>
</div>
Consider the following Styles:
#content{background: red; border:1px dotted blue; width:100px}
#content p{ background: #fff; }
#info { padding: 10px; margin:100%; width:200px; background:#0f0;}
HTML output:
In above sample code the green box moved out of red is because the margin on left is same as that of red’s width, even the top and bottom margins are changed according to it.
So the margin-left =margin-right = margin-top =margin-bottom = 100px;
Margin cannot be applied to the Element with table display types other than inline-table or table-caption or table.
Can be specified either individually or collectively as follows
margin: 2px; /* all side margins set to 2px */
margin: 3em 2em; /* top & bottom = 3em, right & left = 2em */
margin: 1% 2% 3%; /* top=1%, right=2%, bottom=3%, left=2% */
or
margin-top: 1%;
margin-right: 2em;
margin-bottom: 3px;
margin-left: 2em;
/* top=1%, right=2em, bottom=3px, left=2em */
Collapsed Margin:
Whenever two or more elements margin are on adjacent side they merge together to form a new margin – the new margin is collapsed margin.
Margin collapse happens only for top bottom margins (vertical margins).
And it never happens for left or right margins (horizontal margins).
The following rules apply to collapsed margin:
Margin specified for root elements does not merge with other margins. So if margins are specified to html tag and any other which may be adjacent to it that will not merge but will add up to give new margin.
Example
Consider the following HTML code:
<html'>
<body>
some content will go here
</body>
</html>
Consider the following Styles:
html{
margin : 10px;
background-color : pink;
}
body{
margin : 10px;
background : #f2f2f2;
}
HTML output:
Also consider following HTML code:
<div id='wrapper'>
<div id='content'>
<div class='info'>
<p>this is a paragraph</p>
</div>
</div>
</div>
Consider the following Styles:
#content{background: red; width:100px; margin:10px;}
#content p{ background: #fff; }
#info { padding: 10px; margin:20px; width:200px; background:#0f0;}
HTML output:
In above sample code the #info has only a gap of 10px from #content
top edge as the both combine to give only 20px margin in total so the content
margin from its container is 10px and #info is 10px distant from its parent (#content),
while the left margin are not collapsed.
Margin collapse will
not happen when elements are separated by either of border, padding or
clearance.
If the top and bottom
margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does
not collapse with the bottom margin of the parent block.
All rules that implies
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of absolutely positioned boxes and inline- boxes do not collapse (not even with their in-flow children).
- The bottom margin of a static block-level element always collapses with the top margin of its next static block-level sibling, unless that sibling has clearance.
- The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
- The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
- A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.
Padding in Box Model
Padding is the separation between element content and element border. It specifies the width of padding area around the element.
Padding can be applied to all elements except with elements with display table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
Padding area is transparent – this will show the background color or image applied to the element. Padding cannot hold negative values.
Similar to margin padding can also be specified as
padding: 2px; /* all side padding set to 2px */
padding: 3em 2em; /* top & bottom = 3em, right & left = 2em */
padding: 1% 2% 3%; /* top=1%, right=2%, bottom=3%, left=2% */
Or
padding -top: 1%;
padding -right: 2em;
padding -bottom: 3px;
padding -left: 2em;
/* top=1%, right=2em, bottom=3px, left=2em */
Example
Consider the following HTML code:
<div id='content'>
<div id='info'>
<p>this is a paragraph</p>
</div>
</div>
Consider the following Styles:
#info{
padding : 20px;
background-color : red;
}
p{
background-color: white;
}
HTML output:
Border in Box Model
As like padding and margin border can be broken down into 4 sides
Border-left, border-top, border-right and border-bottom
Border can be broken down into three different properties further
Border-color: Color of the border
Border-width: Thickness of the border
Border-style: appearance of the border (like solid, dotted, dashed, etc.).
Example
Consider the following HTML code:
<div id='content'>
<div id='info'>
<p>this is a paragraph</p>
</div>
</div>
Consider the following Styles:
#info{
border : 5px Solid blue;
background-color : red;
}
p{
border-top: 5px solid green;
background-color: yellow;
}
HTML output:
Box Model for Inline Elements:
Based on the direction of text box properties are applicable as follows for inline elements
The last line box will take left padding, left border and left margin.
Important to note is that the inline element will start from the centre point of the line height and it will expand to all side based on padding, margin and border. This is because of line height which remains the same according to which the content is organized.
When text direction is left to right
The first line box will take left padding, left border and left margin.
last line box will take right padding, right border and right margin.
last line box will take right padding, right border and right margin.
Example
Consider the following HTML code:
<div id='content'>
<div class='info'>
<span>a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 .</span>
</div>
</div>
Consider the following Styles:
#content{
background : #f00;
margin : 10px;
padding : 0px;
border: 0px solid #fff;
overflow : hidden;
width: 500px;
}
#content #info{
padding : 0px;
margin : 10px;
background : #0f0;
}
#content #info span{
background : #D0D0D0;
padding : 0px;
margin : 10px;
}
HTML output:
When text direction is right to left
The first line box will take right padding, right border and right margin.The last line box will take left padding, left border and left margin.
Example
Consider the following HTML code:
<div id='content'>
<div class='info'>
<span>a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s</span>
</div>
</div>
Consider the following Styles:
#content{
background : #f00;
margin : 10px;
padding : 0px;
border: 0px solid #fff;
overflow : hidden;
width: 500px;
}
#content #info{
direction: rtl;
padding : 0px;
margin : 10px;
background : #0f0;
}
#content #info span{
background : #fff;
padding : 0px;
margin : 0px 10px 0px 40px;
}
HTML output:
No comments:
Post a Comment