Поля и отступы
Долго ли коротко ли... а мы все идем и идем с вами вперед. Сколько же нами перелопачено, сколько времени и сил угрохано... а все на что? Многие ли из вас не соскочили с дистанции, не сломались, не испугались трудностей? Согласитесь, не так уж легок путь создания собственного сайта. Наверняка не раз хотелось бросить все, взять шаблон, запихнуть туда чего-нибудь... и жить спокойно.
Думаете у меня не было таких мыслей? Иной раз бьешься-бьешься как рыба об лед... а не получается. Или получается, но совсем-совсем не то, что хотелось. Сколько раз хотела я бросить это дело! Ох как часто мне на ушко кто-то неведомый нашептывал... ну на фига? Иди лучше кино посмотри или погуляй, поспи лишний часок?
Не спится. И не гуляется. А даже если и гуляется - все равно думается. Пусть и не только об этих уроках. Но и о них, родимых тоже. Наверное то, что дается с трудом и ценится больше всего? Именно это и страшно потерять? Как вы думаете?
Так что давайте пойдем дальше. Поговорим об отступах и полях.
Margin. Поле
Поля бывают разные. Колхозные поля и поля футбольные. Поля чудес и поля у шляп. У страниц тоже есть поля! Тут даже и растеряться можно! Какое же нам нужно? Скажу вам сразу! Это есть пространство между содержимым элемента и его границей относительно родительского элемента, либо, при его отсутствии - от окна браузера.
Если хотите сделать поля со всех сторон одинаковыми, можете просто указать значение после слова margin. Размерность может быть как в значениях длины (px, pt, em и т.д.), так и в значении auto, а также в процентом соотношении. Однако будьте осторожны! Если элементы вложены друг в друга, при процентах могут быть разные неприятности.
Когда я только начала понимать, что такое CSS, я сразу переделала свой сайт, и конечно же не могла обойтись без margin. У меня были там таблицы вложенные одна в другую. В Explorer смотрелось все отменно, и я, не проверив сайт в других браузерах, сразу же выложила его на всеобщее обозрение. Не успела я налюбоваться на него, как мне пришло ехидное письмо ехидного автора, где он написал буквально следующее: "У вас не только дикие уроки, но и таблицы тоже дикие. Растянутые по ширине на несколько окон браузера". В общем, стыд и позор! И я долго не могла найти своей ошибки, не нашла бы ее и до сих пор, если бы не один добрый человек, который посоветовал мне убрать проценты от margin. И все наладилось!
Так что будьте очень осторожными! Если же вы хотите сделать поля разными со всех сторон, то можете употребить запросто значения margin-top, margin-right, margin-bottom и margin-left. Думаю, вам уже тут все понятно. Ничего сложного нет. Сейчас мы попробуем использовать эти маргинчики в примере предыдущего урока. Ради экономии места я не буду расписывать эти верх-низ, напишу просто margin. А вы, если хотите (а наверняка захотите!!!) можете использовать любые значения. И для практики это будет очень даже хорошо.
Листинг 30.
<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>
И вот что получилось с полями:
Margin. Поля
В стилях мы установили поле страницы и заголовка равным нулю, вот заголовок и прилип к границам браузера. И как бы мы не изменяли размер окна, он так прилипнутым и останется. А вот для картинки мы устрановили поле равным 20 пикселям, вот на это расстояние она и отодвинулась от всех соседних элементов. Однако, в разных браузерах немного по разному все это выглядит. Так что проверяйте.
Поле абзаца я решила не трогать, чтобы не вносить сумятицы. Понятно? Тогда перейдем к отступам!
Padding. Отступ
И, последнее, что мне хочется рассмотреть на этом уроке - это отступы вокруг элемента. Подобно margin отступ может быть одинаковым со всех сторон, и тогда можно обойтись просто padding, а может быть и разным для каждой стороны. Тогда нужно написать padding-top, padding-right, padding-bottom или padding-left. Сразу возьмемся экспери-ментировать: добавим в предыдущий пример отступ для абзаца.
Листинг 31.
<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="image/foto.jpg" align="left">
<P class="abz">
Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые уроки.
</P>
</BODY>
</HTML>
А вот и наши отступе в абзаце:
Окончательный вариант
Что и требовалось доказать! Так что дерзайте, мои дорогие гении и бог вам в помощь!
Чем отличаются margin и padding
Новички часто путают эти два понятия, поэтому хотелось бы разъяснить разницу между ними еще раз. Так сказать, закрепить урок.
Помните страшный-престрашный фильм "Вий" или может быть читали этот рассказ у Гоголя?
И помните, там человек в церкви, дабы защититься от происков ведьмы, нарисовал себе круг? Только внутри круга и было его спасение. Он мог оступать от круга внутрь, вот это расстояние от круга - во внутрь и есть отступ padding.
Но что было бы, если он вышел за круг? Во внешнее ПОЛЕ? Так вот, расстояние от круга во внешнюю сторону и есть margin. Так и запомните! И хотя эти знания так и не уберегли героя рассказа от гибели, но нефиг было подглядывать!
А чтобы лучше определиться с полями и отступами, наделяйте сразу объект бордюром border, потом его можно убрать, но эта видимая граница поможет вам соориентироваться.