Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения

CSS: Ширина и высота элемента

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height.

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

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

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

формула расчета общей высоты и ширины для элемента

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.first {
		width: 150px;
		height: 100px;
		background-color: #B2FFCC;
		padding: 0px;  /*обнуляем внутренние отступы*/
      }
	  p.second {
	    width: 150px;
	    height: 100px;
	    background-color: #C2FFFF;
	    border: 5px ridge #0066FF;
	    padding: 10px;
		margin: 5px;
	  }
    </style>
  </head>

  <body>
    <p class="first">Для данного абзаца зададим только ширину и высоту.</p>
	<p class="second">Этот абзац содержит, кроме ширины и высоты, 
	 внутренний отступ, рамку и внешний отступ.</p>
  </body>
</html>
Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца - 150x100px, а размеры второго - 180x130px (с учетом внутреннего отступа и рамки).

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться свойством overflow. Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        width:150px;
        height:200px;
        border: 1px solid black;
        overflow:auto;
      }
    </style>
  </head>

  <body>
    <div><img src="tree.png"></div>
  </body>
</html>
Попробовать »
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь