Width and height: determine the size of the element. Css width and height parameters for sizing html page elements Overriding block width

Example

Html

CSS

Result

Accessibility concerns

Ensure that elements set with a height are not truncated and / or do not obscure other content when the page is zoomed to increase text size.

Specifications

Browser compatibility

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

By default, autowidth is used for block elements. This means that the element will be stretched horizontally by exactly as much as there is free space. The default height of block elements is set automatically, i.e. the browser stretches the content area vertically to display all of the content. To set custom dimensions for the content area of \u200b\u200ban element, you can use the width and height properties.

The width CSS property allows you to set the width of the element's content area, and the height property the height of the content area:

Note that the width and height properties only determine the size of the content area; to calculate the total width of a block element, add the width of the content area, left and right padding, and the width of the left and right border. The same goes for the total height of the element, only all values \u200b\u200bare calculated vertically:

For this paragraph, we will only set the width and height.

This paragraph contains, in addition to the width and height, padding, border and padding.

The example clearly shows that the second element takes up more space than the first. If we calculate according to our formula, then the dimensions of the first paragraph are 150x100 pixels, and the dimensions of the second paragraph are:

that is, 180x130 pixels.

Overflow of elements

After you have defined the width and height for the element, it is worth paying attention to one important point - the content located inside the element can exceed the specified block size. In this case, some of the content will go beyond the borders of the element, to avoid this unpleasant moment, you can use the CSS overflow property. The overflow property tells the browser what to do if the content of the block exceeds its size. This property can take one of four values:

• visible is the default value used by the browser. Setting this value will have the same effect as not setting the overflow property.
• scroll - adds vertical and horizontal scrollbars to the element.
• auto - adds scrollbars as needed.
• hidden - hides some of the content that goes beyond the bounds of the block element.

The css width properties are responsible for the value of the width of the content area of \u200b\u200bthe element.

Width: value | interest | auto | inherit

The css height property is responsible for the value of the height of the element's content area.

Height: value | interest | auto | inherit

Negative values \u200b\u200bfor the height and width are not allowed.

It would seem that everything is simple and clear with these CSS properties, but, in fact, everything turns out to be not quite that simple.

Setting an element on a web page to a width of 500px does not mean that the total width of that element will be 500 pixels or less.

The most important thing to understand is that the width and height properties set the width and height for the content area.

The width and height properties are just one of the components from which the total width and height of the element will be calculated. They indicate the width and height of the Content area, which can be seen in the following image. Also, properties such as padding, margin and border are involved in the formation of the overall width and height.

This can be easily seen now.

Let's, for example, take two blocks with the same width, but one of them will additionally set the padding property.

By default, web pages have the behavior that the padding value for the corresponding side is added to the height and width values.

Those. the total width of the element will consist of the value of the element's width property, and the padding-left and padding-right values \u200b\u200bwill be added to it.

For different types of elements that can be found on the page, the total width and height of the elements is calculated using special formulas.

For different types of elements that may be found on web pages, the width and height values \u200b\u200bcan have different behavior and values.

A similar situation will be with the height property.

CSS has a special algorithm that calculates the width and height values \u200b\u200bfor different elements on a web page. I will not dwell on this algorithm now, because it is somewhat complicated.

Now the main thing for us to understand is that the width and height properties allow us to work with the width and height of the area with the element's content, and not the total width and height of the element.