Блоки в CSS



В  html различают элементы блочные и строчные. К блочным элементам можно отнести H1-H6, P, DIV. Данные элементы отделяются абзацными отступами. Строчные элементы располагаются на одной строке (strong , EM , I).

Блоки в CSS имеют прямоугольную форму.

У блока имеется содержимое, например текст для элемента р. Размер блока имеет ширину (width) и высоту (height) и определяется содержимым. Вокруг содержимого блока имеются отступы (padding) - дополнительное свободное пространство. Фон отступов такой же, как у блока.

Далее идет граница блока (border), которая может быть видимой или невидимой.

Поля (margin) задают дополнительное свободное пространство вокруг блока с отступами. Фон полей прозрачный. Поля и отступы не входят в размер блока.

Пример записи кода:

<html> <head> <title></title> <style type="text/css"> p{ border:1px solid #06F; } </style> </head> <body> <p>Текст 1 в параграфе.</p> <p>Текст 2 в параграфе.</p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Для того, чтобы сделать отступ от границы применим свойство padding.


Пример записи кода:

<html> <head> <title></title> <style type="text/css"> p{ border:1px solid #06F; padding:10px; } </style> </head> <body> <p>Текст 1 в параграфе.</p> <p>Текст 2 в параграфе.</p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Применение полей margin отделит блоки друг от друга. Установим также размеры блоков width и height.


Пример записи кода:

<html> <head> <title></title> <style type="text/css"> p{ border:1px solid #06F; padding:10px; margin:40px; width:120px; height:60px; } </style> </head> <body> <p>Текст 1 в параграфе.</p> <p>Текст 2 в параграфе.</p> </body> </html>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Это основные понятия CSS. Дальше мы подробнее остановимся на отступах, полях и границах блочных элементов.


Далее рассмотрим: Свойство BORDER в CSS