Width, Height, and Box Sizing

width and height set the the width and height of an element, respectively.

<div id="height-width-example">
  Hi!
</div>

#height-width-example {
  width: 100px;
  height: 50px;
  background-color: #ccc;
}

| LIVE PREVIEW

Hi!

Width and Height Properties

Working with Inline Elements

Setting width and/or height (including min-height, etc.) does not work with inline elements. Try using display: inline-block instead.

Set's the element's width.

Possible values:

length — (e.g. 100px) sets the width to this length
percentage — (e.g. 50%) sets the width to this percentage of the parent's width
auto — sets the width automatically
max-content — sets the width to be as large as the content needs
min-content — sets the width to be as little as possible, without causing an overflow
fit-content — sets the width to be as large as the content needs, but never exceeds the parent's content area width.

Set the element's height.

Possible values:

length — (e.g. 100px) sets the height to this length
percentage — (e.g. 50%) sets the height to this percentage of the parent's height
auto — sets the height automatically

Ensures the element's width does not go lower than this value.

(See width for the possible values.)

Ensures the element's height does not go lower than this value.

(See height for the possible values.)

Ensures the element's width does not go higher than this value.

(See width for the possible values.)

Ensures the element's height does not go higher than this value.

(See height for the possible values.)

Sets the size in the inline direction.

(Which direction this is depends on writing-mode. Normally refers to width when you write horizontally.)

Sets the size in the block direction.

(Which direction this is depends on writing-mode. Normally refers to height when you write horizontally.)

Ensures the element's inline size does not go lower than this value.

Ensures the element's block size does not go lower than this value.

Ensures the element's inline size does not go higher than this value.

Ensures the element's block size does not go higher than this value.

Specifies what to be sized when setting width and height.

Possible values:

content-box — accounts only the element's content area to match width and height (default)
border-box — accounts everything (including the element's border and padding area) to match width and height