Поля и отступы Margin (Поле)
Это пространство между содержимым элемента и его границей относительно родительского элемента, либо, при его отсутствии - от окна браузера.
Если хотите сделать поля со всех сторон одинаковыми, можете просто указать значение после слова margin. Размерность может быть как в значениях длины (px, pt, em и т.д.), так и в значении auto, а также в процентом соотношении.
Если же вы хотите сделать поля разными со всех сторон, то можете употребить значения margin-top, margin-right, margin-bottom и margin-left.
<HTML> <HEAD> <TITLE>BORDER-COLOR</TITLE> <STYLE type="text/css"> body {margin:0} h1 {border-style: double; border-color:blue; margin:0px } P.abz{border-style:dotted; border-color:red; border-width:10px; width:300} IMG {border-style:inset; border-color:gold; border-width:20px; margin: 30px} </STYLE> </HEAD> <BODY> <h1>Картина Шилова "Перед Венчанием"</h1> <img src="foto.jpg" align="left"> <P class="abz"> Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! </P> </BODY> </HTML> |
Сохраните файл под именем pole.html и просмотрите результат в браузере.
В стилях мы установили поле страницы и заголовка равным нулю, вот заголовок и прилип к границам браузера. А вот для картинки мы установили поле равным 20 пикселям. Вот на это расстояние она и отодвинулась от всех соседних элементов.
Padding (Отступ)
Это отступы вокруг элемента. Подобно margin отступ может быть одинаковым со всех сторон, и тогда можно обойтись просто margin, а может быть и разным для каждой стороны. Тогда нужно написать padding-top, padding-right, padding-bottom или padding-left.
<HTML> <HEAD> <TITLE>BORDER-COLOR</TITLE> <STYLE type="text/css"> body {margin:0} h1 {border-style: double; border-color:blue; margin:0px } P.abz{border-style:dotted; border-color:red; border-width:10px; width:300; padding-top:10px; padding-right:20px; padding-bottom:5px; padding-left:15px} IMG {border-style:inset; border-color:gold; border-width:20px; margin: 30px} </STYLE> </HEAD> <BODY> <h1>Картина Шилова "Перед Венчанием"</h1> <img src="foto.jpg" align="left"> <P class="abz"> Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! </P> </BODY> </HTML> |
Внесите изменения. Просмотрите результат в браузере.
Сайт в css Создадим следующий сайт:
Пропишем стили. Для общего фона выберем цвет teal; margin и padding приравняем к нулю (чтобы никаких полей и отступов от границ окна), размер текста установим 12 px, выберем шрифт семейства "sans-serif":
BODY { PADDING:0px; MARGIN: 0px; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Sans-Serif; BACKGROUND-COLOR: teal} |
Теперь можно разместить слева логотип и название.
H1 { FONT-SIZE: 30px; COLOR: gold; PADDING-LEFT: 500px; PADDING-TOP: 0px} <BODY> <IMG src="image/logo.gif" width=468 height=60 alt="логотип" align=left border=0> <h1>Добро пожаловать!</h1> </BODY> |
Теперь перейдем к красной полосе. Представим, что надпись - "ДИКАЯ ПРАВДА - сайт в CSS" - один сплошной белый заголовок на красном фоне! И расположим его справа, добавив разные отступы и поля:
H3 { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: white; PADDING-TOP: 5px; BACKGROUND-COLOR: red; TEXT-ALIGN: right } <H3>ДИКАЯ ПРАВДА - сайт в CSS</h3> |
Теперь рассмотрим оставшуюся часть подробнее.
Левый блок - menu, правый блок - reclama, а средний блок - content. Левый и правый блок шириной 160 px, один прижат к левому (LEFT: 0 px), другой к правому (RIGHT:0 px) краю экрана. Значения фиксированные (POSITION: absolute). Для каждого блока задать бордюр, отступы и поля, золотистый цвет заднего фона (BACKGROUND-color: gold).
#menu { WIDTH:160px; PADDING: 10px; LEFT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px inset red; BACKGROUND-COLOR: gold } #reclama { WIDTH:160px; PADDING: 15px; RIGHT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px outset red; BACKGROUND-COLOR: gold } #content { BORDER-RIGHT: silver 5px solid; PADDING: 10px; MARGIN: 15px 250px; MARGIN: 0px; BORDER-LEFT: #silver 2px solid; BACKGROUND-COLOR: #fff } .<H3>ДИКАЯ ПРАВДА - сайт в CSS</h1> |
В теле же документа прописываем следующее:
<DIV id=menu> <H2>МЕНЮ:</H2> это содержание меню </DIV> <DIV id=reclama> <H2glt;РЕКЛАМА</H2> тут вешаем рекламу </DIV> <DIV id=content> <H2>Основное содержание (Content)</H2> тут основной текст </DIV> |
Итак, весь код странички:
<HTML> <HEAD> <TITLE>Сайт в CSS</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <STYLE type=text/css> BODY {PADDING:0px; MARGIN: 0px; FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Sans-Serif; BACKGROUND-COLOR: teal} H1 {FONT-SIZE: 30px; COLOR: gold; PADDING-LEFT: 500px; PADDING-TOP: 0px} H2 {FONT-SIZE: 14px; COLOR: red; } H3 {PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: white; PADDING-TOP: 5px; BACKGROUND-COLOR: red; TEXT-ALIGN: right} #menu { WIDTH:160px; PADDING: 10px; LEFT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px inset red; BACKGROUND-COLOR: gold} #content {BORDER-RIGHT: silver 5px solid; PADDING:10px; MARGIN: 15px 250px; BORDER-LEFT: #silver 2px solid; BACKGROUND-COLOR: #ffffff} #reclama { WIDTH:160px; PADDING:15px; RIGHT: 0px; MARGIN: 0px; POSITION: absolute; border: 5px outset red; BACKGROUND-COLOR: gold} </STYLE> </HEAD> <BODY> <IMG src="image/logo.gif" width=468 height=60 alt="логотип" align=left border=0></A> <h1>Добро пожаловать!</h1> <H3>ДИКАЯ ПРАВДА - сайт в CSS</H3> <DIV id=menu> <H2>МЕНЮ:</H2> Здесь меню </DIV> <DIV id=reclama> <H2>РЕКЛАМА</H2> Здесь рекламный текст </DIV> <DIV id=content> <H2>Основное содержание (Content)</H2> <p> Тут основной текст </DIV> </BODY> </HTML> |