All properties Animations Backgrounds Box model Flexbox CSS Grid Positioning

Transitions Typography

CSS Reference is free and always will be!

Please whitelist us in your ad blocker.
Thank you!

Box model in CSS

The CSS properties that allow you to define the size and behavior of the HTML element

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃 Get it now →

In collection: Box-Model Permalink Share MDN

# border-bottom-width
Like border-width , but for the bottom border only.

border-bottom-width: 0; default

Removes the bottom border.

ShareHello world Menu

 border-bottom-width: 4px;

You can use pixel values.

Hello world

In collection: Box-Model Permalink Share MDN

# border-left-width
Like border-width , but for the left border only.

border-left-width: 0; default

Removes the left border.

Hello world

border-left-width: 4px;

You can use pixel values.

Hello world

In collection: Box-Model Permalink Share MDN

# border-right-width
Like border-width , but for the right border only.

border-right-width: 0; default

Removes the right border.

Hello world

Share Menu
 border-right-width: 4px;

You can use pixel values.

Hello world

In collection: Box-Model Permalink Share MDN

# border-top-width
Like border-width , but for the top border only.

border-top-width: 0; default

Removes the top border.

Hello world

border-top-width: 4px;

You can use pixel values.

Hello world

In collection: Box-Model Permalink Share MDN

# border-width
Defines the width of the element's borders.

border-width: 1px;

Defines the width of all borders to 1px.

Hello world

Share Menu
 border-width: 2px 0;

Defines the top and bottom borders to 2px, the left and right to 0.

Hello world

In collection: Box-Model Permalink Share Can I use MDN

# box-sizing
Defines how the width and height of the element are calculated: whether they include the padding and
borders or not.

box-sizing: content-box; default

The width and height of the element only apply to the content of the element.

For example, this element has

border-width: 12px
padding: 30px
width: 200px

The full width is 24px + 60px + 200px = 284px.

The content has the defined width. The box accomodates for those dimensions.

200px
Hello world

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: 12px
padding: 30px
width: 200px

The full width is 200px, no matter what.

Share Menu
 The box has the defined width. The content accomodates for those dimensions, and ends up being 200px - 60px -
24px = 116px.

200px
Hello world

In collection: Box-Model Permalink Share MDN

# height
Defines the height of the element.

height: auto; default

The element will automatically adjust its height to allow its content to be displayed correctly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis
neque sit amet erat.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis
neque sit amet erat.

Share Menu
 In collections: Box-Model Typography Permalink Share MDN

# line-height
Defines the height of a single line of text.

line-height: normal; default

Reverts to the default value of the browser.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.

line-height: 1.6; recommended

You can use unitless values: the line height will be relative to the font size.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.

line-height: 30px;

You can use pixel values.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus

felis hendrerit sit amet.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.

Share Menu
 In collection: Box-Model Permalink Share MDN

# margin-bottom
Defines the space outside the element, on the bottom side.

margin-bottom: 0; default

Removes any margin at the bottom.

First item

Target

Third item

margin-bottom: 30px;

You can use pixel values.

First item

Target

30px

Third item

margin-bottom: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

Target

2em
Share Menu
 Third item

margin-bottom: 10%;

You can use percentage values.

The percentage is based on the width of the container.

First item

Target
10%

Third item

In collection: Box-Model Permalink Share MDN

# margin-left
Defines the space outside the element, on the left side.

margin-left: 0; default

Removes any margin on the left.

First item

Target

Third item

margin-left: 50px;

You can use pixel values.

Share First item Menu

 50px
Target

Third item

margin-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

7em
Target

Third item

margin-left: 30%;

You can use percentage values.

The percentage is based on the width of the container.

First item

30%
Target

Third item

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.

First item

auto
Target
width: 200px

Share Third item Menu

 In collection: Box-Model Permalink Share MDN

# margin-right
Defines the space outside the element, on the right side.

margin-right: 0; default

Removes any margin on the right.

First item

Target

Third item

margin-right: 50px;

You can use pixel values.

First item

50px
Target

Third item

margin-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

7em
Target
Share Menu
 Third item

margin-right: 30%;

You can use percentage values.

The percentage is based on the width of the container.

First item

30%
Target

Third item

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.

First item

auto
Target
width: 200px

Third item

In collection: Box-Model Permalink Share MDN

# margin-top
Defines the space outside the element, on the top side.

margin-top: 0; default

Removes any margin at the top.

First item

Share Menu
Target
 Third item

margin-top: 30px;

You can use pixel values.

First item

30px

Target

Third item

margin-top: 2em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

2em

Target

Third item

margin-top: 10%;

You can use percentage values.

The percentage is based on the width of the container.

First item
10%

Share Menu
Target
 Third item

In collection: Box-Model Permalink Share MDN

# margin
Shorthand property for margin-top margin-right margin-bottom and margin-left .

margin: 0; default

Removes all margins.

First item

Target

Third item

margin: 30px;

When using 1 value, the margin is set for all 4 sides.

First item

30px

30px Target 30px

30px

Third item

margin: 30px 60px;

When using 2 values:

the first value is for top/bottom

the second value is for right/left

To remember the order think about the values you haven't defined.
Share Menu
 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.

First item

30px

60px Target 60px

30px

Third item

margin: 30px 60px 45px;

When using 3 values:

the first value is for top

the second value is for right/left
the third value is for bottom

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.

First item

30px

60px Target 60px

45px

Third item

margin: 30px 60px 45px 85px;

When using 4 values:

the first value is for top

the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

Share Menu
 First item

30px

85px Target 60px

45px

Third item

In collection: Box-Model Permalink Share MDN

# max-height
Defines the maximum height the element can be.

max-height: none; default

The element has no limit in terms of height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis
neque sit amet erat.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis
neque sit amet erat.

Share
max-height: 100px; Menu
 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet. Pellentesque interdum, nisl nec interdum
maximus, augue diam porttitor lorem, et sollicitudin felis
neque sit amet erat.

In collection: Box-Model Permalink Share MDN

# max-width
Defines the maximum width the element can be.

max-width: none; default

The element has no limit in terms of width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
felis neque sit amet erat.

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.

Share Menu
 Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Etiam
semper diam at erat
pulvinar, at pulvinar
felis blandit.
Vestibulum volutpat
tellus diam,
consequat gravida
libero rhoncus ut.
Maecenas imperdiet
felis nisi, fringilla
luctus felis hendrerit
sit amet.
Pellentesque
interdum, nisl nec
interdum maximus,
augue diam porttitor
lorem, et sollicitudin
felis neque sit amet
erat.

In collection: Box-Model Permalink Share MDN

# min-height
Defines the minimum height of the element.

min-height: 0; default

The element has no minimum height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam

semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.
Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
amet. Pellentesque interdum, nisl nec interdum minimus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam

semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.
Share Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit Menu
 amet. Pellentesque interdum, nisl nec interdum minimus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.

min-height: 5px;

If the minimum height is smaller than the element's actual height, the min height has no effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam

semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat gravida libero rhoncus ut.
Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit
amet. Pellentesque interdum, nisl nec interdum minimus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.

In collection: Box-Model Permalink Share MDN

# min-width
Defines the minimum width of the element.

min-width: 0; default

The element has no minimum width.

Hello world

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.

Hello world

min-width: 5px;
Share Menu
 If the minimum width is smaller than the element's actual width, the min width has no effect.

Hello world

In collection: Box-Model Permalink Share MDN

# padding-bottom
Defines the space inside the element, on the bottom side.

padding-bottom: 0; default

Removes any padding on the bottom.

First item
Target
Third item

padding-bottom: 50px;

You can use pixel values.

First item
Target
50px

Third item

padding-bottom: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item
Target
7em

Share Menu
 Third item

padding-bottom: 30%;

You can use percentage values.

The percentage is based on the width of the element.

First item
Target
30%

Third item

In collection: Box-Model Permalink Share MDN

# padding-left
Defines the space inside the element, on the left side.

padding-left: 0; default

Removes any padding on the left.

First item

Target

Third item

padding-left: 50px;

You can use pixel values.

Share Menu
 First item

50px
Target

Third item

padding-left: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

7em
Target

Third item

padding-left: 30%;

You can use percentage values.

The percentage is based on the width of the element.

First item

30%
Target

Third item

In collection: Box-Model Permalink Share MDN

# padding-right
Defines the space inside the element, on the right side.

padding-right: 0;
Share default
Menu
 Removes any padding on the right.

First item

Target

Third item

padding-right: 50px;

You can use pixel values.

First item

50px
Target

Third item

padding-right: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

7em
Target

Third item

padding-right: 30%;

You can use percentage values.

The percentage is based on the width of the element.

Share First itemMenu

 30%
Target

Third item

In collection: Box-Model Permalink Share MDN

# padding-top
Defines the space inside the element, on the top side.

padding-top: 0; default

Removes any padding on the top.

First item
Target
Third item

padding-top: 50px;

You can use pixel values.

First item
50px

Target
Third item

padding-top: 7em;

You can use (r)em values.

The value is relative to the font size:

em: relative to the element's current font size

rem: relative to <html> the root element's font size

First item

Share Menu
 7em

Target
Third item

padding-top: 30%;

You can use percentage values.

The percentage is based on the width of the element.

First item
30%

Target
Third item

In collection: Box-Model Permalink Share MDN

# padding
Shorthand property for padding-top padding-right padding-bottom and padding-left .

padding: 0; default

Removes all paddings.

Target

padding: 30px;

When using 1 value, the padding is set for all 4 sides.

30px
Share
30pxTarget
Menu
30px
 30px

padding: 30px 60px;

When using 2 values:

the first value is for top/bottom

the second value is for right/left

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.

30px
60px Target 60px
30px

padding: 30px 60px 45px;

When using 3 values:

the first value is for top

the second value is for right/left
the third value is for bottom

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.

30px
60px Target 60px

45px

padding: 30px 60px 45px 85px;

When using 4 values:

the first value is for top

the second value is for right
the third value is for bottom
the fourth value is for left

To remember the order, start at the top and go clockwise.

30px
85px Target 60px
Share 45px Menu
 In collection: Box-Model Permalink Share MDN

# width
Defines the width of the element.

width: auto; default

The element will automatically adjust its width to allow its content to be displayed correctly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
hendrerit sit amet.

width: 240px;

You can use numeric values like pixels, (r)em, percentages...

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Etiam
semper diam at erat pulvinar, at
pulvinar felis blandit. Vestibulum
volutpat tellus diam, consequat
gravida libero rhoncus ut. Maecenas
imperdiet felis nisi, fringilla luctus
felis hendrerit sit amet.

width: 50%;

If you use percentages, the value is relative to the container's width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam semper diam at erat pulvinar, at pulvinar felis
blandit. Vestibulum volutpat tellus diam, consequat
gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
fringilla luctus felis hendrerit sit amet.

Share Menu