Element height and width are calculated values. Each element of a web page forms a rectangular area, which in turn consists of several areas - content area (content), padding areas, frame areas and field areas element.
Between the content of the element and its border are indentation padding, outside the border of the element - fields margin. Each element has a content area, other areas are optional.
Rice. 1. Block model of an element 1. Element height
The height property sets the height of the content of the block element and has no effect on inline elements display: inline; ... The height of inline elements is equal to the height of their content. Negative values are not allowed. The property is not inherited.
Syntax
P (height: 100px;)
2. Item Width
The width property sets the width of the content of the block element and has no effect on inline elements display: inline; ... Inline elements have the same width as their content. Negative values are not allowed. The property is not inherited.
Syntax
P (width: 100px;)
3. Height and width of an absolutely positioned element
Set the width and height of an absolutely positioned element position: absolute; not always necessary, as in this case the height and width are implicitly determined by the element's offset. If borders and margins are specified for an element, they reduce the size of the content area by the appropriate values.
Div (background: # 6A7690; position: absolute; top: 0; bottom: 0; left: 50%; right: 0;) / * in this case, the element's height is 100%, width is 50% of the parent block * / 
Rice. 2. Height and width of an absolutely positioned element
4. Element indents
Using the padding property, you can set padding for multiple sides of an element at the same time in the following order:. If the element has a background, it will extend to padding as well. Negative values are not allowed. The property is not inherited.
If three values are given, for example, div (padding: 10px 20px 30px;), then they will be distributed in the following order: the first value is the top padding, the second is the right and left padding, and the third is the bottom padding.
If two values are given, for example div (padding: 10px 20px;), then the first will set the top and bottom padding, the second will set the right and left.
A single value like div (padding: 10px;) will set the same padding on all sides of the element.
Syntax
P (padding: 5px 10px 15px 10px;)
4.1. Indenting one side of an element
To set the padding on only one side of an element, you need to use one of the padding-top, padding-right, padding-bottom, padding-left properties, for example:
P (padding-left: 10px;)
5. Element fields
Most of the elements are separated from each other by margins. The margin property is a shorthand form for writing the margins of an element in the following order: top, right, bottom, left... It is used when you need to specify margins from several sides, but not necessarily from four sides. The vertically adjacent margins of block elements collapse, and top and bottom margins have no effect on inline elements. Negative values are allowed. The property is not inherited.
If three values are given, for example, div (margin: 10px 20px 30px;), then they will be distributed in the following order: the first value is the top margin, the second is the right and left margin, and the third is the bottom margin.
If two values are given, for example, div (margin: 10px 20px;), then the first will set the top and bottom margins, the second will set the right and left.
A single value like div (margin: 10px;) will set the same margins on all sides of the element.
(margin: 0 auto;) will only work if the width of the element is explicitly set.
Rice. 3. margin: auto; for absolutely positioned element Syntax
Div (margin: 5px 10px 2px 5px;)
5.1. Margins on one side of the element
The margin-top, margin-right, margin-bottom, margin-left properties control the corresponding margins on each side of the element, for example:
P (margin-left: 10px;)
6. Limiting width and height
CSS also supports a few other properties related to setting the height and width of web page elements: min-height, min-width, max-height, and max-width. These properties allow you to set the minimum and maximum values for the width or height of an element, giving the element the ability to fill the available space. Properties are often used for responsive web page design. Applies to all elements except inline and table elements. They always follow the main rule, i.e. after giving the element a height or width. Not inherited.
You can set regular dimensions using some units of measure, and size restrictions using other units, for example:
Div (width: 400px; max-width: 50%;)
The element will be 400px wide only if this value does not exceed 50% of the width of the container block, otherwise its width will be reduced.
In this article, we'll take a look at how you can set a block's height as a percentage of its width in CSS. Let's look at the application of this technology using the example of creating a Bootstrap carousel (slider) from images of different sizes.
Creating a block with a height that has a certain percentage of its width
- Create HTML structure from 2 blocks:
The first block has 2 classes. Using the item-responsive class, we will set the relative positioning of the block. This must be done so that the 2 block (which will have absolute positioning) is located relative to it. In addition, this class is also used to add the: before pseudo-element before the content of the corresponding elements (item-responsive). This element will set the desired height of the box relative to its width using the padding-top CSS property. The trick of this method is that if the padding property is set to not in pixels, but in percentages, then it will be calculated by the browser relative to its width... Thus, it is possible to obtain a block with the required height. The next step is to give block 2 absolute positioning and align it with the first block.
- Add the following CSS to the page: .item-responsive (position: relative; / * relative positioning * /) .item-responsive: before (display: block; / * render the element as a block * / content: ""; / * content pseudo-element * / width: 100%; / * element width * /) .item-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /) .item-responsive> .content ( position: absolute; / * absolute position of the element * / / * position of the element * / top: 0; left: 0; right: 0; bottom: 0;) / * If necessary (for blocks with these classes) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /) .item-2by1 (padding-top: 50%; / * (1: 2) * 100% * /) .item -1by1 (padding-top: 100%; / * (1: 1) * 100% * /)
Applying the above technology to create a Bootstrap carousel
If you are not familiar with Bootstrap and want to know what it is, you can check out our Introduction to Bootstrap.
Let's look at an example where the above HTML structure and CSS code will be used to display Bootstrap carousel slides.
We will use the following files as images:
- carousel_1.jpg (width = 736px, height = 552px, aspect ratio (height to width) = 1.33);
- carousel_2.jpg (width = 1155px, height = 1280px, aspect ratio (height to width) = 0.9);
- carousel_3.jpg (width = 1846px, height = 1028px, aspect ratio (height to width) = 1.8);
- carousel_4.jpg (width = 1140px, height = 550px, aspect ratio (height to width) = 2.07);
- carousel_5.jpg (width = 800px, height = 600px, aspect ratio (height to width) = 1.33);
We will set the images as the background. This will allow images with different aspect ratios to be used in the Bootstrap 3 carousel.
HTML markup of the carousel:
Carousel CSS code:
Item-responsive (position: relative; / * relative positioning * /) .item-responsive: before (display: block; / * render element as block * / content: ""; / * pseudo-element content * / width: 100%; / * element width * /) .item-16by9 (padding-top: 56.25%; / * (9:16) * 100% * /) .item-responsive> .content (position: absolute; / * absolute position of the element * / / * element position * / top: 0; left: 0; right: 0; bottom: 0; background-size: cover! important;)
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 an element, you can use the width and height properties.
The width CSS property allows you to set the width of the content area of an element, and the height property allows you to set 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 are 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.
Try "The example clearly shows that the second element takes up more space than the first. If you calculate according to our formula, then the dimensions of the first paragraph are 150x100 pixels, and the dimensions of the second paragraph are:
| Overall height: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
| upper frame | upper indent | height | lower indent | bottom frame |
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.
Description
Sets the height of block or replaceable elements (for example, the tag ). Height does not include the thickness of the borders around the element, padding, and margins.
If the content of the block exceeds the specified height, then the height of the element will remain unchanged and the content will be displayed on top of it. This feature can cause the content of elements to overlap when the elements in the HTML code are sequential. To prevent this from happening, add overflow: auto to the element's style.
Syntax
height: value | interest | auto | inherit
The values
Any length units accepted in CSS are accepted as values - for example, pixels (px), inches (in), points (pt), etc. When using percentage notation, the height of an element is calculated depending on the height of the parent element. If the parent is not explicitly specified, then the browser window is used as its parent. auto sets the height based on the content of the element
HTML5 CSS2.1 IE Cr Op Sa Fx
The result of this example is shown in Fig. 1.
Rice. 1. Applying the height property
Object Model
document.getElementById ("elementID") .style.height
Browsers
Internet Explorer 6 incorrectly defines height as min-height.
In quirk mode, Internet Explorer up to and including version 8.0 incorrectly calculates the height of an element without adding padding, margin, and border values to it.
Internet Explorer up to and including version 7.0 does not support the inherit value.
The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.
The source for this interactive example is stored in a GitHub repository. If you "d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The min-height and max-height properties override height.
Syntax
/ * Keyword value * / height: auto; / *Values
CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow. ">Formal syntax
Example
Html
CSS
div (width: 250px; margin-bottom: 5px; border: 2px solid blue;) #taller (height: 50px;) #shorter (height: 25px;) #parent (height: 100px;) #child (height: 50% ; width: 75%;)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
| Specification | Status | Comment |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 4 |
Editor "s Draft | |
| CSS Intrinsic & Extrinsic Sizing Module Level 3 The definition of "height" in that specification. |
Working Draft | Added the max-content, min-content, fit-content keywords. |
| CSS Transitions The definition of "height" in that specification. |
Working Draft | Lists height as animatable. |
| CSS Level 2 (Revision 1) The definition of "height" in that specification. |
Recommendation | Adds support for the CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow. "> |
| CSS Level 1 The definition of "height" in that specification. |
Recommendation | Initial definition. |
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | no |
| Percentages | The percentage is calculated with respect to the height of the generated box "s containing block. If the height of the containing block is not specified explicitly (ie, it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block. |
| Media | visual |
| Computed value | a percentage or auto or the absolute length |
| Animation type | a CSS data type are interpolated as real, floating-point numbers. "> length, CSS data type are interpolated as real, floating-point numbers."> percentage or calc (); |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
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
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
| height | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 7 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
| fit-content | Chrome Full support 46 | Edge No support No | Firefox No support No | IE No support No | Opera Full support 33 | Safari Full support 11 Full support 11 Full support 9 Prefixed Prefixed | Opera Android? | Safari iOS Full support 11 Full support 11 Full support 9 Prefixed Prefixed Implemented with the vendor prefix: -webkit- | ||||
| max-content | Chrome Full support 46 | Edge No support No | Prefixed Prefixed | IE No support No | Opera Full support 44 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Prefixed Prefixed Implemented with the vendor prefix: -moz- | Samsung Internet Android Full support 5.0 | ||
| min-content | Chrome Full support 46 | Edge No support No | Firefox Full support 66 Full support 66 Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -moz- | IE No support No | Opera Full support 44 | Safari Full support 11 | WebView Android Full support 46 | Chrome Android Full support 46 | Firefox Android Full support 66 Full support 66 Full support 4 Prefixed Prefixed Implemented with the vendor prefix: -moz- | Opera Android Full support 43 | Safari iOS Full support 11 | Samsung Internet Android Full support 5.0 |
| stretch | Chrome Full support 28 Webkit-fill-available"> Alternate Name Full support 28Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name | Edge No support No | Firefox No support No | IE No support No | Opera Full support 15 Webkit-fill-available"> Alternate Name Full support 15Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available | Safari Full support 9 Webkit-fill-available"> Alternate Name Full support 9Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available | WebView Android Full support 4.4 Webkit-fill-available"> Alternate Name Full support 4.4Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available | Chrome Android Full support 28 Webkit-fill-available"> Alternate Name Full support 28Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available | Firefox Android No support No | Opera Android? | Safari iOS Full support 9 Webkit-fill-available"> Alternate Name Full support 9Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available | Samsung Internet Android Full support 5.0 Webkit-fill-available"> Alternate Name Full support 5.0Webkit-fill-available"> Alternate Name Webkit-fill-available"> Alternate Name Uses the non-standard name: -webkit-fill-available |
