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:

описание работы CSS свойств height и width

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
widthright
padding
right
border

total height:5px+10px+100px+10px+5px = 130px
top
border
top
padding
heightbottom
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:

<!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 »
Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011-2018 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen