Like border-width, but for the bottom border only.
default border-bottom-width: 0;
Removes the bottom border.
border-bottom-width: 4px;
You can use pixel values.
Like border-width, but for the left border only.
default border-left-width: 0;
Removes the left border.
border-left-width: 4px;
You can use pixel values.
Like border-width, but for the right border only.
default border-right-width: 0;
Removes the right border.
border-right-width: 4px;
You can use pixel values.
Like border-width, but for the top border only.
default border-top-width: 0;
Removes the top border.
border-top-width: 4px;
You can use pixel values.
Defines the width of the element's borders.
border-width: 1px;
Defines the width of all borders to 1px.
border-width: 2px 0;
Defines the top and bottom borders to 2px, the left and right to 0.
Defines how the width and height of the element are calculated: whether they include the padding and borders or not.
default box-sizing: content-box;
The width and height of the element only apply to the content of the element.
For example, this element has
border-width: 12pxpadding: 30pxwidth: 200pxThe full width is 24px + 60px + 200px = 284px.
The content has the defined width. The box accomodates for those dimensions.
box-sizing: border-box;
The width and height of the element apply to all parts of the element: the content, the padding and the borders.
For example, this element has
border-width: 12pxpadding: 30pxwidth: 200pxThe full width is 200px, no matter what.
The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.
Defines the height of the element.
default height: auto;
The element will automatically adjust its height to allow its content to be displayed correctly.
height: 100px;
You can use numeric values like pixels, (r)em, percentages...
If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.
Defines the height of a single line of text.
default line-height: normal;
Reverts to the default value of the browser.
recommended line-height: 1.6;
You can use unitless values: the line height will be relative to the font size.
line-height: 30px;
You can use pixel values.
line-height: 0.8em;
You can use em values: like with unitless values, the line height will be relative to the font size.
Defines the space outside the element, on the bottom side.
default margin-bottom: 0;
Removes any margin at the bottom.
margin-bottom: 30px;
You can use pixel values.
margin-bottom: 2em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-bottom: 10%;
You can use percentage values.
The percentage is based on the width of the container.
Defines the space outside the element, on the left side.
default margin-left: 0;
Removes any margin on the left.
margin-left: 50px;
You can use pixel values.
margin-left: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-left: 30%;
You can use percentage values.
The percentage is based on the width of the container.
margin-left: auto;
The auto keyword will give the left side a share of the remaining space.
When combined with margin-right: auto, it will center the element, if a fixed width is defined.
Defines the space outside the element, on the right side.
default margin-right: 0;
Removes any margin on the right.
margin-right: 50px;
You can use pixel values.
margin-right: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-right: 30%;
You can use percentage values.
The percentage is based on the width of the container.
margin-right: auto;
The auto keyword will give the right side a share of the remaining space.
When combined with margin-left: auto, it will center the element, if a fixed width is defined.
Defines the space outside the element, on the top side.
default margin-top: 0;
Removes any margin at the top.
margin-top: 30px;
You can use pixel values.
margin-top: 2em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-top: 10%;
You can use percentage values.
The percentage is based on the width of the container.
Shorthand property for margin-top margin-right margin-bottom and margin-left.
default margin: 0;
Removes all margins.
margin: 30px;
When using 1 value, the margin is set for all 4 sides.
margin: 30px 60px;
When using 2 values:
To remember the order think about the values you haven't defined.
If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.
margin: 30px 60px 45px;
When using 3 values:
To remember the order think about the values you haven't defined.
If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.
margin: 30px 60px 45px 85px;
When using 4 values:
To remember the order, start at the top and go clockwise.
Defines the maximum height the element can be.
default max-height: none;
The element has no limit in terms of height.
max-height: 2000px;
You can use numeric values like pixels, (r)em, percentages...
If the maximum height is larger than the element's actual height, the max height has no effect.
max-height: 100px;
If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.
Defines the maximum width the element can be.
default max-width: none;
The element has no limit in terms of width.
max-width: 2000px;
You can use numeric values like pixels, (r)em, percentages...
If the maximum width is larger than the element's actual width, the max width has no effect.
max-width: 150px;
If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.
Defines the minimum height of the element.
default min-height: 0;
The element has no minimum height.
min-height: 200px;
You can use numeric values like pixels, (r)em, percentages...
If the minimum height is larger than the element's actual height, the min height will be applied.
min-height: 5px;
If the minimum height is smaller than the element's actual height, the min height has no effect.
Defines the minimum width of the element.
default min-width: 0;
The element has no minimum width.
min-width: 300px;
You can use numeric values like pixels, (r)em, percentages...
If the minimum width is larger than the element's actual width, the min width will be applied.
min-width: 5px;
If the minimum width is smaller than the element's actual width, the min width has no effect.
Defines the space inside the element, on the bottom side.
default padding-bottom: 0;
Removes any padding on the bottom.
padding-bottom: 50px;
You can use pixel values.
padding-bottom: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-bottom: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the left side.
default padding-left: 0;
Removes any padding on the left.
padding-left: 50px;
You can use pixel values.
padding-left: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-left: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the right side.
default padding-right: 0;
Removes any padding on the right.
padding-right: 50px;
You can use pixel values.
padding-right: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-right: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the top side.
default padding-top: 0;
Removes any padding on the top.
padding-top: 50px;
You can use pixel values.
padding-top: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-top: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Shorthand property for padding-top padding-right padding-bottom and padding-left.
default padding: 0;
Removes all paddings.
padding: 30px;
When using 1 value, the padding is set for all 4 sides.
padding: 30px 60px;
When using 2 values:
To remember the order think about the values you haven't defined.
If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.
padding: 30px 60px 45px;
When using 3 values:
To remember the order think about the values you haven't defined.
If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.
padding: 30px 60px 45px 85px;
When using 4 values:
To remember the order, start at the top and go clockwise.
Defines the width of the element.
default width: auto;
The element will automatically adjust its width to allow its content to be displayed correctly.
width: 240px;
You can use numeric values like pixels, (r)em, percentages...
width: 50%;
If you use percentages, the value is relative to the container's width.
Like border-width, but for the bottom border only.
default border-bottom-width: 0;
Removes the bottom border.
border-bottom-width: 4px;
You can use pixel values.
Like border-width, but for the left border only.
default border-left-width: 0;
Removes the left border.
border-left-width: 4px;
You can use pixel values.
Like border-width, but for the right border only.
default border-right-width: 0;
Removes the right border.
border-right-width: 4px;
You can use pixel values.
Like border-width, but for the top border only.
default border-top-width: 0;
Removes the top border.
border-top-width: 4px;
You can use pixel values.
Defines the width of the element's borders.
border-width: 1px;
Defines the width of all borders to 1px.
border-width: 2px 0;
Defines the top and bottom borders to 2px, the left and right to 0.
Defines how the width and height of the element are calculated: whether they include the padding and borders or not.
default box-sizing: content-box;
The width and height of the element only apply to the content of the element.
For example, this element has
border-width: 12pxpadding: 30pxwidth: 200pxThe full width is 24px + 60px + 200px = 284px.
The content has the defined width. The box accomodates for those dimensions.
box-sizing: border-box;
The width and height of the element apply to all parts of the element: the content, the padding and the borders.
For example, this element has
border-width: 12pxpadding: 30pxwidth: 200pxThe full width is 200px, no matter what.
The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 30px - 24px = 146px.
Defines the height of the element.
default height: auto;
The element will automatically adjust its height to allow its content to be displayed correctly.
height: 100px;
You can use numeric values like pixels, (r)em, percentages...
If the content does not fit within the specified height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.
Defines the height of a single line of text.
default line-height: normal;
Reverts to the default value of the browser.
recommended line-height: 1.6;
You can use unitless values: the line height will be relative to the font size.
line-height: 30px;
You can use pixel values.
line-height: 0.8em;
You can use em values: like with unitless values, the line height will be relative to the font size.
Defines the space outside the element, on the bottom side.
default margin-bottom: 0;
Removes any margin at the bottom.
margin-bottom: 30px;
You can use pixel values.
margin-bottom: 2em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-bottom: 10%;
You can use percentage values.
The percentage is based on the width of the container.
Defines the space outside the element, on the left side.
default margin-left: 0;
Removes any margin on the left.
margin-left: 50px;
You can use pixel values.
margin-left: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-left: 30%;
You can use percentage values.
The percentage is based on the width of the container.
margin-left: auto;
The auto keyword will give the left side a share of the remaining space.
When combined with margin-right: auto, it will center the element, if a fixed width is defined.
Defines the space outside the element, on the right side.
default margin-right: 0;
Removes any margin on the right.
margin-right: 50px;
You can use pixel values.
margin-right: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-right: 30%;
You can use percentage values.
The percentage is based on the width of the container.
margin-right: auto;
The auto keyword will give the right side a share of the remaining space.
When combined with margin-left: auto, it will center the element, if a fixed width is defined.
Defines the space outside the element, on the top side.
default margin-top: 0;
Removes any margin at the top.
margin-top: 30px;
You can use pixel values.
margin-top: 2em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizemargin-top: 10%;
You can use percentage values.
The percentage is based on the width of the container.
Shorthand property for margin-top margin-right margin-bottom and margin-left.
default margin: 0;
Removes all margins.
margin: 30px;
When using 1 value, the margin is set for all 4 sides.
margin: 30px 60px;
When using 2 values:
To remember the order think about the values you haven't defined.
If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.
margin: 30px 60px 45px;
When using 3 values:
To remember the order think about the values you haven't defined.
If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.
margin: 30px 60px 45px 85px;
When using 4 values:
To remember the order, start at the top and go clockwise.
Defines the maximum height the element can be.
default max-height: none;
The element has no limit in terms of height.
max-height: 2000px;
You can use numeric values like pixels, (r)em, percentages...
If the maximum height is larger than the element's actual height, the max height has no effect.
max-height: 100px;
If the content does not fit within the maximum height, it will overflow. How the container will handle this overflowing content is defined by the overflow property.
Defines the maximum width the element can be.
default max-width: none;
The element has no limit in terms of width.
max-width: 2000px;
You can use numeric values like pixels, (r)em, percentages...
If the maximum width is larger than the element's actual width, the max width has no effect.
max-width: 150px;
If the content does not fit within the maximum width, it will automatically change the height of the element to accomodate for the wrapping of the content.
Defines the minimum height of the element.
default min-height: 0;
The element has no minimum height.
min-height: 200px;
You can use numeric values like pixels, (r)em, percentages...
If the minimum height is larger than the element's actual height, the min height will be applied.
min-height: 5px;
If the minimum height is smaller than the element's actual height, the min height has no effect.
Defines the minimum width of the element.
default min-width: 0;
The element has no minimum width.
min-width: 300px;
You can use numeric values like pixels, (r)em, percentages...
If the minimum width is larger than the element's actual width, the min width will be applied.
min-width: 5px;
If the minimum width is smaller than the element's actual width, the min width has no effect.
Defines the space inside the element, on the bottom side.
default padding-bottom: 0;
Removes any padding on the bottom.
padding-bottom: 50px;
You can use pixel values.
padding-bottom: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-bottom: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the left side.
default padding-left: 0;
Removes any padding on the left.
padding-left: 50px;
You can use pixel values.
padding-left: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-left: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the right side.
default padding-right: 0;
Removes any padding on the right.
padding-right: 50px;
You can use pixel values.
padding-right: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-right: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Defines the space inside the element, on the top side.
default padding-top: 0;
Removes any padding on the top.
padding-top: 50px;
You can use pixel values.
padding-top: 7em;
You can use (r)em values.
The value is relative to the font size:
<html> the root element's font sizepadding-top: 30%;
You can use percentage values.
The percentage is based on the width of the element.
Shorthand property for padding-top padding-right padding-bottom and padding-left.
default padding: 0;
Removes all paddings.
padding: 30px;
When using 1 value, the padding is set for all 4 sides.
padding: 30px 60px;
When using 2 values:
To remember the order think about the values you haven't defined.
If you enter 2 values (top/right), you omit setting bottom and left. Because bottom is the vertical counterpart of top, it will use top’s value. And because left is the horizontal counterpart of right, it will use right’s value.
padding: 30px 60px 45px;
When using 3 values:
To remember the order think about the values you haven't defined.
If you enter 3 values (top/right/bottom), you omit setting left. As right’s counterpart, it will use its value.
padding: 30px 60px 45px 85px;
When using 4 values:
To remember the order, start at the top and go clockwise.
Defines the width of the element.
default width: auto;
The element will automatically adjust its width to allow its content to be displayed correctly.
width: 240px;
You can use numeric values like pixels, (r)em, percentages...
width: 50%;
If you use percentages, the value is relative to the container's width.