CSS. Поля элемента.

     Мы не будем здесь разбирать определения, а будем разбираться на конкретных примерах. Допустим, у нас есть страница с парой заголовков h3 и текстом. ( см. пример )

Пример:

<html>
  <head>
    <title>Пример</title>
    </head>
  <body>
   <h3 > Пиратия Онлайн.</h3>
   <p>Новая бесплатная онлайн игра в сказочной аниме вселенной, завоевавшая признание более 7 миллионов игроков по всему миру. Бескрайние просторы магического мира Аскарон и Великого океана, ждущие своих первооткрывателей, уникальные игровые петы, развивающиеся вместе с игроком, и собственный корабль. </p>
   <h3>Легенда: Наследие Драконов</h3>
   <p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил. </p>
</body>
</html>

 

Результат:

Пиратия Онлайн.

Новая бесплатная онлайн игра в сказочной аниме вселенной, завоевавшая признание более 7 миллионов игроков по всему миру. Бескрайние просторы магического мира Аскарон и Великого океана, ждущие своих первооткрывателей, уникальные игровые петы, развивающиеся вместе с игроком, и собственный корабль.

Легенда: Наследие Драконов

Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил.

     Так вот, чтобы установить расстояние от каждой стороны до наших элементов используется свойство margin, которое может принимать значения:
margin-bottom - расстояние от нижнего края;
margin-left - расстояние от левого края;
margin-right - расстояние от правого края;
margin-top - расстояние от верхнего края.
     CSS - код будет выглядеть так:
body {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 50px;
}
     или
body { margin: 20px 30px 20px 50px; }
     Применм его.

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
         body {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 50px;
}
    </style>
  </head>
  <body>
   <h3 > Пиратия Онлайн.</h3>
   <p>Новая бесплатная онлайн игра в сказочной аниме вселенной, завоевавшая признание более 7 миллионов игроков по всему миру. Бескрайние просторы магического мира Аскарон и Великого океана, ждущие своих первооткрывателей, уникальные игровые петы, развивающиеся вместе с игроком, и собственный корабль. </p>
   <h3>Легенда: Наследие Драконов</h3>
   <p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил. </p>
</body>
</html>

Результат: (открыть в браузере)

     В результате у нас получилось, что наш контент расположен на расстоянии 20px от верхнего края, 30 px от правого края, 50 px от левого края и 20 px от нижнего края.
     Устанавливать поля можно для любого элемента, например, для параграфа:
p {margin: 5px 50px 5px 50px;}
     Чтобы убрать отступы, необходимо выставить значение свойства margin равное нулю: body { margin: 0; }. Если в свойстве margin прописать одно значение, допустим: margin: 30px; , то поля будут установлены для всех сторон- 30px. Так же величину отступов можно указывать не только в пикселах (px), но и процентах (%) или др.

     Также можно установить значение полей вокруг конкретного элемента. Для этого используется свойство padding, которое также принимает значения: right, left, top и bottom. Чтобы более наглядно увидеть это на примере используем фоновое заполнение в заголовках:
h3 {background: yellow;}
h4 {background: red;}.
     Теперь установим велечину поля вокруг текста каждого заголовка:
h3 {
background: yellow;
padding: 20px 20px 20px 50px;
}
h4 {
background: red;
padding-left:60px;
}

Пример:

<html>
  <head>
    <title>Пример</title>
    <style type="text/css">
         body {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 50px;
}
h3 {
background: yellow;
padding: 20px 20px 20px 50px;
}
h4 {
background: red;
padding-left:60px;
}
   </style>
  </head>
  <body>
   <h3 > Пиратия Онлайн.</h3>
   <p>Новая бесплатная онлайн игра в сказочной аниме вселенной, завоевавшая признание более 7 миллионов игроков по всему миру. Бескрайние просторы магического мира Аскарон и Великого океана, ждущие своих первооткрывателей, уникальные игровые петы, развивающиеся вместе с игроком, и собственный корабль. </p>
   <h4>Легенда: Наследие Драконов</h4>
   <p>Увлекательнейшая онлайн-игра, действие которой разворачивается в фэнтези мире Фэо. На протяжении многих лет здесь идет война между людьми и магмарами. Два великих дракона стоят на страже интересов обеих рас. Нет силы, способной противостоять мощи гигантов, но когда приходит хаос, даже они не в силах сдерживать зыбкий баланс сил. </p>
</body>
</html>

Результат: (открыть в браузере)

     Если в свойстве padding прописать одно значение, допустим: padding: 20px; , то поля будут установлены для всех сторон- 20px.

 Смотрите также:
Загрузка...