CSS height and width dimensions
By default, the block elements use the auto width. This means that the element will be stretched horizontally exactly as much as there is free space. The height of the block elements is automatically set by default, i.e. the browser stretches the content area in the vertical direction so that the entire content is displayed. To set your own dimensions for the element's content area, you can use the width
and height
properties.
The CSS width
property allows you to set the width of the element's content area, and the CSS height
property allows you to set the height of the content area of the element:
Note that the width
and height
properties determine the size of only the content area to calculate the total width of the block element, you need to add the width of the content area, the left and right inner indents, and the width of the left and right borders. The same applies to the total height of the element, only all values are calculated vertically:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> p.first { width: 150px; height: 100px; background-color: #B2FFCC; padding: 0px; /*zero internal indents*/ } p.second { width: 150px; height: 100px; background-color: #C2FFFF; border: 5px ridge #0066FF; padding: 10px; margin: 5px; } </style> </head> <body> <p class="first">For this paragraph, we specify only the width and height.</p> <p class="second">This paragraph contains, in addition to width and height, inner indent, border and outer indent.</p> </body> </html>Try it »
The example shows that the second element occupies more space than the first. If you count by our formula, then the first paragraph is 150x100 pixels in size, and the dimensions of the second paragraph:
total width: | 5px | + | 10px | + | 150px | + | 10px | + | 5px | = 180px |
left border | left padding | width | right padding | right border |
total height: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | = 130px |
top border | top padding | height | bottom padding | bottom border |
that is 180x130 pixels.
Overflow
After you have defined the width and height for an element, you should pay attention to one important point - the content located inside the element can exceed the specified block size. In this case, part of the content will go beyond the bounds of the element to avoid this unpleasant moment, you can use the CSS overflow
property. The overflow
property tells the browser how to proceed if the block's content exceeds its size. This property can take one of four values:
- visible is the default value used by the browser. Specifying this value will have the same effect as no setting of the
overflow
property. - scroll adds vertical and horizontal scroll bars to the element.
- auto adds scroll bars as needed.
- hidden hides part of the content that goes beyond the boundaries of the block element.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page title</title> <style> div { width:100px; height:100px; border: 1px solid black; overflow:auto; } </style> </head> <body> <div><img src="flower.png"></div> </body> </html>Try it »
With this theme look: