Самоучитель 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>
Попробовать »

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

Общая ширина:5px+10px+150px+10px+5px = 180px
левая
рамка
левый
отступ
ширинаправый
отступ
правая
рамка

Общая высота:5px+10px+100px+10px+5px = 130px
верхняя
рамка
верхний
отступ
высотанижний
отступ
нижняя
рамка

то есть 180x130 пикселей.

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

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством 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-2018 © puzzleweb.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen