Уроки CSS для новичков - Поля и отступы - урок 11


High Star

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




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

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

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

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

Margin. Поле

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

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

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

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

Листинг 30.

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

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


Margin. Поля

В стилях мы установили поле страницы и заголовка равным нулю, вот заголовок и прилип к границам браузера. И как бы мы не изменяли размер окна, он так прилипнутым и останется. А вот для картинки мы устрановили поле равным 20 пикселям, вот на это расстояние она и отодвинулась от всех соседних элементов. Однако, в разных браузерах немного по разному все это выглядит. Так что проверяйте.

Поле абзаца я решила не трогать, чтобы не вносить сумятицы. Понятно? Тогда перейдем к отступам!

Padding. Отступ

И, последнее, что мне хочется рассмотреть на этом уроке - это отступы вокруг элемента. Подобно margin отступ может быть одинаковым со всех сторон, и тогда можно обойтись просто padding, а может быть и разным для каждой стороны. Тогда нужно написать padding-top, padding-right, padding-bottom или padding-left. Сразу возьмемся экспери-ментировать: добавим в предыдущий пример отступ для абзаца.

Листинг 31.

<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="image/foto.jpg" align="left">
    <P class="abz">
      Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые уроки.
    </P>
  </BODY>
</HTML>

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


Окончательный вариант

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

Чем отличаются margin и padding

Новички часто путают эти два понятия, поэтому хотелось бы разъяснить разницу между ними еще раз. Так сказать, закрепить урок.

Помните страшный-престрашный фильм "Вий" или может быть читали этот рассказ у Гоголя?

И помните, там человек в церкви, дабы защититься от происков ведьмы, нарисовал себе круг? Только внутри круга и было его спасение. Он мог оступать от круга внутрь, вот это расстояние от круга - во внутрь и есть отступ padding.

Но что было бы, если он вышел за круг? Во внешнее ПОЛЕ? Так вот, расстояние от круга во внешнюю сторону и есть margin. Так и запомните! И хотя эти знания так и не уберегли героя рассказа от гибели, но нефиг было подглядывать!

А чтобы лучше определиться с полями и отступами, наделяйте сразу объект бордюром border, потом его можно убрать, но эта видимая граница поможет вам соориентироваться.