CSS 2.
Box Model
CSS BOX Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about
design and layout.
Box model
Borders & Outline
Margin & Padding
Height and width
CSS Borders:
Property
Description
border
Sets all the border properties in one declaration
border-width
Sets the width of the four borders
border-color
Sets the color of the four borders
border-style
Sets the style of the four borders. (Values are listed below)
border-left
Sets all the left border properties in one declaration
border-top
Sets all the top border properties in one declaration
border-right
Sets all the right border properties in one declaration
border-bottom
Sets all the bottom border properties in one declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
CSS 2.1
Box Model
border-right-width
Sets the width of the right border
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
The border-style Property:
groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas
The border-style property can have from one to four values.
border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style: dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
border-style: dotted solid;
top and bottom borders are dotted
right and left borders are solid
border-style: dotted;
all four borders are dotted
CSS 2.1
Box Model
Border Outline:
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
outline-color
outline-style: Same values as border-style
outline-width
outline: <color> <style> <width>
CSS Margins:
The margin property defines the space around an HTML element. It is possible to use negative values to overlap
content.
Property
Description
margin
A shorthand property for setting the margin properties in one declaration
margin-bottom
Sets the bottom margin of an element
margin-left
Sets the left margin of an element
margin-right
Sets the right margin of an element
margin-top
Sets the top margin of an element
Examples:
<p style="margin: 15px; border:1px solid black;">All four margins will be 15px </p>
<p style="margin:10px 2%; border:1px solid black;">Top and bottom margin will be 10px, left and right margin will
be 2% of the total width of the document. </p>
<p style="margin: 10px 2% -10px; border:1px solid black;"> Top margin will be 10px, left and right margin will be
2% of the total width of the document, bottom margin will be -10px </p>
<p style="margin: 10px 2% -10px auto; border:1px solid black;">Top margin will be 10px, right margin will be 2% of
the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>
CSS Padding:
The padding clears an area around the content (inside the border) of an element. The padding is affected by the
background color of the element.
Property
padding
Description
A shorthand property for setting all the padding properties in one declaration
3
CSS 2.1
Box Model
padding-bottom
Sets the bottom padding of an element
padding-left
Sets the left padding of an element
padding-right
Sets the right padding of an element
padding-top
Sets the top padding of an element
Examples:
<p style="padding: 15px; border:1px solid black;">All four padding will be 15px </p>
<p style="padding:10px 2%; border:1px solid black;"> Top and bottom padding will be 10px, left and right padding
will be 2% of the total width of the document. </p>
<p style="padding: 10px 2% 10px; border:1px solid black;"> Top padding will be 10px, left and right padding will be
2% of the total width of the document, bottom padding will be 10px </p>
<p style="padding: 10px 2% 10px 10px; border:1px solid black;">Top padding will be 10px, right padding will be 2%
of the total width of the document, bottom padding and top padding will be 10px </p>
CSS Dimensions
The CSS dimension properties allow you to control the height and width of an element.
The height property is used to set the height of a box.
The width property is used to set the width of a box.
The line-height property is used to set the height of a line of text.
The max-height property is used to set a maximum height that a box can be.
The min-height property is used to set the minimum height that a box can be.
The max-width property is used to set the maximum width that a box can be.
The min-width property is used to set the minimum width that a box can be.
Example:
<p style="width:400px; height:100px;border:1px solid red;padding:5px; margin:10px;line-height:30px;"> This is
Demo This is Demo This is Demo This is Demo This is Demo This is Demo This is Demo This is Demo This is Demo
This is Demo This is Demo This is Demo This is Demo This is Demo </p>
