All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to add a border around elements, and to define space between elements.
The image below illustrates the box model:
Explanation of the different parts:
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
|
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins. |
Let's make a div element with a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Let's do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
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
Internet Explorer 8 and earlier versions, include padding and border in the width property.
To fix this problem, add a <!DOCTYPE html> to the HTML page.
The CSS border properties allow you to specify the style, size, and color of an element's border.
The border-style property specifies what kind of border to display.
|
Note: None of the border properties will have ANY effect unless the border-style property is set! |
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Try it yourself: Set the style of the border
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
The border-color property is used to set the color of the border. The color can be set by:
You can also set the border color to "transparent".
If the border color is not set it is inherited from the color property of the element.
Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: #98bf21;
}
In CSS it is possible to specify different borders for different sides:
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
The example above can also be set with a single property:
p {
border-style: dotted solid;
}
The border-style property can have from one to four values.
The border-style property is used in the example above. However, it also works with border-width and border-color.
As you can see from the examples above, there are many properties to consider when dealing with borders.
To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property.
The border property is a shorthand for the following individual border properties:
p {
border: 5px solid red;
}
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.
Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the width of the left border
This example demonstrates how to set the width of the left border.
Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.
Set the color of the right border
This example demonstrates how to set the color of the right border.
|
Property |
Description |
|
Sets all the border properties in one declaration |
|
|
Sets all the bottom border properties in one declaration |
|
|
Sets the color of the bottom border |
|
|
Sets the style of the bottom border |
|
|
Sets the width of the bottom border |
|
|
Sets the color of the four borders |
|
|
Sets all the left border properties in one declaration |
|
|
Sets the color of the left border |
|
|
Sets the style of the left border |
|
|
Sets the width of the left border |
|
|
Sets all the right border properties in one declaration |
|
|
Sets the color of the right border |
|
|
Sets the style of the right border |
|
|
Sets the width of the right border |
|
|
Sets the style of the four borders |
|
|
Sets all the top border properties in one declaration |
|
|
Sets the color of the top border |
|
|
Sets the style of the top border |
|
|
Sets the width of the top border |
|
|
Sets the width of the four borders |
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline properties specify the style, color, and width of an outline.
Draw a line around an element (outline)
This example demonstrates how to draw a line around an element, outside the border edge.
Set the style of an outline
This example demonstrates how to set the style of an outline.
Set the color of an outline
This example demonstrates how to set the color of an outline.
Set the width of an outline
This example demonstrates how to set the width of an outline.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
However, the outline property is different from the border property.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
|
Property |
Description |
Values |
|
Sets all the outline properties in one declaration |
outline-color |
|
|
Sets the color of an outline |
color_name |
|
|
Sets the style of an outline |
none |
|
|
Sets the width of an outline |
thin |
The CSS margin properties define the space around elements.
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
|
Value |
Description |
|
auto |
The browser calculates a margin |
|
length |
Specifies a margin in px, pt, cm, etc. Default value is 0px |
|
% |
Specifies a margin in percent of the width of the containing element |
|
inherit |
Specifies that the margin should be inherited from the parent element |
|
Note: It is also possible to use negative values, to overlap content. |
In CSS, it is possible to specify different margins for different sides of an element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.
The shorthand property for all the margin properties is "margin":
p {
margin: 100px 50px;
}
The margin property can have from one to four values.
Set the top margin of a text using a cm value
This example demonstrates how to set the top margin of a text using a cm value.
Set the bottom margin of a text using a percent value
This example demonstrates how to set the bottom margin in percent, relative to the width of the containing element.
|
Property |
Description |
|
A shorthand property for setting the margin properties in one declaration |
|
|
Sets the bottom margin of an element |
|
|
Sets the left margin of an element |
|
|
Sets the right margin of an element |
|
|
Sets the top margin of an element |
The CSS padding properties define the space between the element border and the element content.
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.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
|
Value |
Description |
|
length |
Defines a fixed padding (in pixels, pt, em, etc.) |
|
% |
Defines a padding in % of the containing element |
In CSS, it is possible to specify different padding for different sides:
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property.
The shorthand property for all the padding properties is "padding":
p {
padding: 25px 50px;
}
The padding property can have from one to four values.
All the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.
Set the left padding
This example demonstrates how to set the left padding of a p element.
Set the right padding
This example demonstrates how to set the right padding of a p element.
Set the top padding
This example demonstrates how to set the top padding of a p element.
Set the bottom padding
This example demonstrates how to set the bottom padding of a p element.
|
Property |
Description |
|
A shorthand property for setting all the padding properties in one declaration |
|
|
Sets the bottom padding of an element |
|
|
Sets the left padding of an element |
|
|
Sets the right padding of an element |
|
|
Sets the top padding of an element |
The CSS dimension properties allow you to control the height and width of an element.
Set the height of elements
This example demonstrates how to set the height of different elements.
Set the height of an image using percent
This example demonstrates how to set the height of an element using a percent value.
Set the width of an element using a pixel value
This example demonstrates how to set the width of an element using a pixel value.
Set the maximum height of an element
This example demonstrates how to set the maximum height of an element.
Set the maximum width of an element using percent
This example demonstrates how to set the maximum width of an element using a percent value.
Set the minimum height of an element
This example demonstrates how to set the minimum height of an element.
Set the minimum width of an element using a pixel value
This example demonstrates how to set the minimum width of an element using a pixel value.
|
Property |
Description |
Values |
|
Sets the height of an element |
auto |
|
|
Sets the maximum height of an element |
none |
|
|
Sets the maximum width of an element |
none |
|
|
Sets the minimum height of an element |
length |
|
|
Sets the minimum width of an element |
length |
|
|
Sets the width of an element |
auto |
The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Box 1
Box 2
Box 3
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
h1.hidden {
visibility: hidden;
}
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:
h1.hidden {
display: none;
}
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
An inline element only takes up as much width as necessary, and does not force line breaks.
Examples of inline elements:
Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards.
The following example displays <li> elements as inline elements:
li {
display: inline;
}
The following example displays <span> elements as block elements:
span {
display: block;
}
|
Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it. |
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
Float is very often used for images, but it is also useful when working with layouts.
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
img {
float: right;
}
If you place several floating elements after each other, they will float next to each other if there is room.
Here we have made an image gallery using the float property:
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
.text_line {
clear: both;
}
An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.
An image with a caption that floats to the right
Let an image with a caption float to the right.
Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.
Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.
Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.
|
Property |
Description |
Values |
|
Specifies which sides of an element where other floating elements are not allowed |
left |
|
|
Specifies whether or not a box should float |
left |
A block element is an element that takes up the full width available, and has a line break before and after it.
Examples of block elements:
For aligning text, see the CSS Text chapter.
In this chapter we will show you how to horizontally align block elements for layout purposes.
Block elements can be center-aligned by setting the left and right margins to "auto".
|
Note: Using margin:auto; will not work in IE8 and earlier, unless a !DOCTYPE is declared. |
Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
.center {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #b0e0e6;
}
Tip: Center-aligning has no effect if the width is 100%.
One method of aligning elements is to use absolute positioning:
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
One method of aligning elements is to use the float property:
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier when using the float property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the float property:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}