В HTML к блочной структуре относят: заголовки h1, h2, h3, h4, h5, h6, параграфы <p> и элементы <div> и т.д.
В блоках могут располагаться картинки, ссылки и т.п.
border
Рамка блока. Чтобы сделать рамку видимой и красивой, нужно указать её стиль.
Имеет такие свойства:
-width — толщину рамки
-color — цвет рамки
-style — стиль рамки.
Стили указываются так:
solid — сплошная рамка
dotted — точечная рамка
dashed — пунктирная рамка
double — из двойной сплошной линии (минимальная толщина 3 пикселя)
groove — рамка с имитацией объемной вдавленной линии
ridge — рамка с выпуклой линией
inset — рамка имитирующая вдавленный блок
outset — рамка делает блок так, что он кажется выпуклым.
Можно писать сокращённой формой. Последовательность такая:
толщина стиль цвет. Все пишется через пробел, например:
h1
{border: 4px dotted red; }
Пример рамки:
Также можно задавать разный стиль для каждой стороны рамки. Подставьте к border -top,
-left,
-right,
-bottom
(верх,лево,право,низ),
этим вы уточняете какую именно сторону рамки вы бы хотели заменит в стиле.
>> Пример CSS :
h2{
border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: green;
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: black; }
В сокращённом виде:
h2{
border-top: 10px solid red;
border-left: 3px dotted green;
border-right: 3px dotted green;
border-bottom: 5px dashed black;}
Можно задать стиль всей рамки, а нужные стороны прописать отдельно.
h2{
border: 20px solid red;
border-top: 5px dashed black;
border-bottom-color: blue; }
padding
Это поля внутри блока. Размер от рамки до содержимого в блоке ( размер в пикселях ).
Пример:
Здесь также можно задавать значения для отдельных полей, подставляя слова -top, -left, -right, -bottom.
Пример:
h2{
padding: 50px;
padding-top: 10px;
padding-lef: 10px;
padding-right: 10px;
padding-bottom: 10px; }
margin
Задаёт расстояние отступа от блока до других элементов на странице.
Вы можете задавать расстояние на каждую сторону, подставляя слова -top, -left, -right, -bottom.
Пример, общий отступ 100 пикселей, а сверху 10 пикселей.
h2{
margin: 100px;
margin-top: 10px; }
Вот что получится: