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



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

Размеры блоков

Правильно определить размеры блоков поможет следующая схема:

Блоковая структура элемента

В соответствие данной схемой каждый блок обязательно имеет содержимое (текст, изображения и т.д.) и необязательное окружение (внешние и внутренние отступы и рамку).

Всё, что сейчас Вам нужно знать это то, что каждая из указанных площадей имеет границы (границы образуемые блоком, создаваемым внутренним отступом (свойством padding), границы, образуемые блоком, создаваемым внешним отступом (свойством margin) и т.д.).

В CSS2 существуют правило, согласно которому, если граница padding равна 0, то данная граница совпадает с границей блока создаваемого содержимым элемента (content). Если граница рамки (свойство border) равна 0, то она совпадает с границей, создаваемой блоком, использующим свойство padding. Аналогичное правило предусмотрено и для блока, образуемого применением свойства margin.

Ширину блока (не ширина содержимого элемента) составляет сумма правого и левого внутренних отступов(padding), правого и левого внешнего отступа (свойство marign), рамка (свойство border) и ширина содержимого (блок content на схеме 1).

Высоту блока (не высоту содержимого элемента) составляют суммы верхнего и нижнего внутренних отступов(padding), суммы верхнего и нижнего внешних отступов (свойство marign), рамка (свойство border) и высота содержимого (блок content на схеме 1).

Ниже приведен код, устанавливающий свойства padding, margin и border для блоков li и ul.

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4.<TITLE>Examples of margins, padding, and borders</TITLE>
  5.<STYLE type="text/css">
  6. UL {
  7. background: green;
  8. margin: 12px 12px 12px 12px;
  9. padding: 3px 3px 3px 3px;
10. /* Рамка отсутствует*/
11. }
12. LI {
13. color: black; /* цвет текста black */
14. background: gray; /* Content, padding will be gray */
15. margin: 12px 12px 12px 12px;
16. padding: 12px 0px 12px 12px; /* Правый внешний отступ равен 0px */
17. list-style: none /* маркеры элементами списка отсутствуют/
18. /* Рамка не установлена/
19. }
20. LI.withborder {
21. border-style: dashed;
22. border-width: medium; /* рамка уставлена для всех сторон/
23. border-color: black;
24. }
25. </STYLE>
26.</HEAD>
27. <BODY>
28. <UL>
29. <LI>Первый элемент списка
30. <LI class="withborder">Второй элемент списка
31. </UL>
32. </BODY>
33.</HTML>
34.
35.
Свойств padding, margin и border для блоков li и ul
Свойств padding, margin и border для блоков li и ul


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