Закрыть ... [X]

Как сделать отступы от края

Изначально в HTML коде нет возможности задать отступы для элементов страницы. Из - за чего и встаёт вопрос о том как сделать отступ в html?

как сделать отступ в htmlЕсли вы не используете на своём сайте никаких таблиц стилей или javascript сценариев - вам придётся трудно с заданием отступов на страницах вашего сайта. Поэтому лучше исключить однотипный HTML сайт, а разнообразить его CSS или JS сценариями.

Всё же в "чистом" HTML существует способ задавания отступов. Для тега img можно задать вертикальный и горизонтальный отступ от другого элемента. Так же отступ можно сделать с помощью прозрачной gif картинки, задавая ей ширину и высоту с помощью height и width.

<img src="images.gif" height="15" width="15" alt="" />

отступ в htmlВ наше время CSS уже не ново и используют данную технологию все сайты.

Таблица стилей может быть подключена ко всему сайту сразу или же вы можете задавать стили для элементов внутри каждой страницы - если это HTML сайт с большим количеством страниц, в отличии от PHP сайтов, которые имея всего 2-5 страниц могут сделать сайт с огромным количеством страниц.

Для осуществления отступов элементов на страницах сайта с помощью css, применяются стили такие как:

  • height
  • width
  • padding
  • margin

Возможно, можно еще какими либо способами осуществить отступы, но вышеперечисленные - самые оптимальные и работают во всех браузерах (в большинстве случаев) одинаково.

Рассмотрим практические примеры создания отступов в HTML с помощью css.
Для начала создадим блок в котором разместим 2 вида текста - обычный и подчёркнутый. Под div блоком добавим абзац с текстом.

<div class="block"> Элемент №1 <u>Элемент №2</u> </div> <p>Элемент №3</p>

С помощью таблиц стилей зададим отступы для каждых элементов.

margin-left Задаст отступ всего div блока от левого участка сайта.

padding-left добавит отступ для подчёркнутого текста от левого края простого текста на 15 пикселей.

А абзац будет иметь отступ от верхних элементов на 20 пикселей и отступ по краям в зависимости от задаваемой ему ширине.

<style type="text/css"> div { margin-left:15px; } .block u { padding-left:15px; } p { width:350px; text-align:center; margin-top:20px; } </style>

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Комментарии:

Добавить комментарий:



Поделись с друзьями



Рекомендуем посмотреть ещё:




Отступы Как сделать чтобы в симс 3 не старели

Как сделать отступы от края Как сделать отступы от края Как сделать отступы от края Как сделать отступы от края Как сделать отступы от края Как сделать отступы от края

ШОКИРУЮЩИЕ НОВОСТИ