СОРОК ПЕРВЫЙ УРОК



Поля и отступы

Долго ли коротко ли... разменяли мы с вами пятый десяток уроков. Сколько же нами перелопачено, сколько времени и сил угрохано... а все на что? Многие ли из вас не соскочили с дистанции, не сломались, не испугались трудностей? Согласитесь, не так уж легок путь создания собственного сайта. Наверняка не раз хотелось бросить все, взять шаблон, запихнуть туда чего-нибудь... и жить спокойно.

Думаете у меня не было таких мыслей? Иной раз бьешься-бьешься как рыба об лед... а не получается. Или получается, но совсем-совсем не то, что хотелось. Сколько раз хотела я бросить это дело! Ох как часто мне на ушко кто-то неведомый нашептывал... ну на фига? Иди лучше кино посмотри или погуляй, поспи лишний часок?

Не спится. И не гуляется. А даже если и гуляется - все равно думается. Пусть и не только о диких уроках. Но и о них, родимых тоже. Наверное то, что дается с трудом и ценится больше всего? Именно это и страшно потерять? Как вы думаете?

Ладно, зато скоро я вас научу, как можно зарабатывать на собственном сайте. Потерпите только чуть-чуть, хорошо? Научу как рассылки делать, как использовать SSI... да мало ли чему можно научиться в этих "диких уроках"?

Так что давайте пойдем дальше. Поговорим об отступах и полях.


Margin. Поле.

Поля бывают разные. Колхозное поля и поля футбольные. Поля чудес и поля у шляп. У страниц тоже есть поля! Тут даже и растеряться можно! Какое же нам нужно? Скажу вам сразу! Это есть пространство между содержимым элемента и его границей относительно родительского элемента, либо, при его отсутствии - от окна браузера.

Если хотите сделать поля со всех сторон одинаковыми, можете просто указать значение после слова margin. Размерность может быть как в значениях длины (px, pt, em и т.д.), так и в значении auto, а также в процентом соотношении. Однако будьте осторожны! Если элементы вложены друг в друга, при процентах могут быть разные неприятности.

Когда я только начала понимать, что такое CSS, я сразу переделала свой сайт, и конечно же не могла обойтись без margin. У меня были там таблицы вложенные одна в другую. В Explorer смотрелось все отменно, и я, не проверив сайт в других браузерах, сразу же выложила его на всеобщее обозрение. Не успела я налюбоваться на него, как мне пришло ехидное письмо ехидного автора, где он написал буквально следующее: "У вас не только дикие уроки, но и таблицы тоже дикие. Растянутые по ширине на несколько окон браузера". В общем, стыд и позор! И я долго не могла найти своей ошибки, не нашла бы ее и до сих пор, если бы не один добрый человек, который посоветовал мне убрать проценты от margin. И все наладилось!

Так что будьте очень осторожными! Если же вы хотите сделать поля разными со всех сторон, то можете употребить запросто значения margin-top, margin-right, margin-bottom и margin-left. Думаю, вам уже тут все понятно. Ничего сложного нет. Сейчас мы попробуем использовать эти маргинчики в примере предыдущего урока. Ради экономии места я не буду расписывать эти верх-низ, напишу просто margin. А вы, если хотите (а наверняка захотите!!!) можете использовать любые значения. И для практики это будет очень даже хорошо.

<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>

И вот что получилось с полями:

В стилях мы установили поле страницы и заголовка равным нулю, вот заголовок и прилип к границам браузера. И как бы мы не изменяли размер окна, он так прилипнутым и останется. А вот для картинки мы устрановили поле равным 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>

А вот и наши отступе в абзаце:

Что и требовалось доказать! Так что дерзайте, мои дорогие гении и бог вам в помощь!

Да, что еще хочу сказать. Если что непонятно - пишите на форум. Там мои друзья. И знаете, кто они? Да те же люди, которые зашли на "Дикие уроки", да так вот и подружились. Это и Алекс, и Наблюдалкин, и Фея Зима и Томми и JCDen и Student и многие другие... Присоединяйтесь! И вам помогут, и вы поможете...


К списку всех уроков

(В. Ахметзянова, 2005 г)