Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Различие между свойствами 'top', 'margin-top', 'height', 'margin-bottom', и 'bottom' зависит от типа блока:

  1. Строчные незаменяемые элементы
  2. Строчные заменяемые элементы;
  3. Блочные незаменяемые элементы;
  4. Блочные заменяемые элементы;
  5. Незаменяемые элементы, находящиеся в «плавающем» потоке;
  6. Заменяемые элементы, находящиеся в «плавающем» потоке;
  7. Незаменяемые элементы с абсолютным позиционированием;
  8. Заменяемые элементы с абсолютным позиционированием;

Для всех вышеуказанных типов элементов существуют отдельные правила при использовании для них свойств 'top', 'margin-top', 'height', 'margin-bottom', и 'bottom'. Рассмотрим их подробнее.

Строчные незаменяемые элементы

Если свойства top, bottom, margin-top или свойство margin-bottom равны auto, их вычисленное значение будет соответствовать 0. Свойство height для данного типа элементов не применяется, вместо него необходимо применять свойство line-height.

Строчные, блочные заменяемые элементы, заменяемые элементы как в нормальном так и в «плавающем» потоке, все другие заменяемые элементы

Если свойства top, bottom, margin-top или свойство margin-bottom равны auto, их действительное вычисленное значение будет соответствовать 0. Если свойство height равно auto, то высота определяется содержимым элемента.

Другие элементы (блочные незаменяемые элементы, как в нормальном, так и в «плавающем» потоке)

Для данных типов высота определяется дочерним строчным или блочным элементом.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4. <TITLE>Свойство height</TITLE>
  5.<STYLE type="text/css">
  6.div.main {
  7.height:100px;
  8.border:5px solid #cadceb;
  9.}
10.</STYLE>
11. </HEAD>
12. <BODY id="body">
13.<div class="main">
14.Распознание болезни по внешнему виду — это искра божия,
15.выслушиванием — необыкновенное мастерство,
16.с помощью вопросов — ловкость, а по исследованию пульса — искусство.
17.</div>
18. </BODY>
19.</HTML>
20.
Пример свойства width
Пример свойства width

Незаменяемые элементы с абсолютным позиционированием

Высота содержащего блока для элементов данного типа определяется следующей формой свойств = 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' =

Если свойтсва height и bottom равны auto, то свойство bottom, как и свойства margin-top или margin-bottom (если последние два свойства так же равны auto) заменяется на 0.

Если свойства margin-top и margin-bottom равны auto, то их действительные значения будут равными, то есть элемент будет выровнен по середине родительского элемента.

Максимальная и минимальная высота

В тех случаях, когда необходимо ограничивать высоту элемента определенными размерами, Вам понадобятся свойства min-height и max-height. Минимальная высота всегда имеет приоритет над максимальной.


Александр Ермаков. Хостинг - www.pwstudio.org