Как сделать отступ в html

Изначально в 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>

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

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

Учимся работать с cookies на javascript

Многоуровневый список в html

Что если ноутбук перегревается и выключается

Что делать если компьютер не запускается

Частота звука воспринимаемая человеком и низкие частоты звука

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

Добавленно - 2011-04-29

Devid пишет:

Думаю что margin не самый оптимальный тег отступа в html, лучше использовать padding.
И еще, как сделать отступ в html при помощи CSS3 ? или CSS3 не отличается от простого css?
Спасибо.

Добавленно - 2011-05-06

JOHNI пишет:

CSS3 от CSS тем что CSS3 имеет больше функциональных возможностей,но не во всех браузерах может применяться..То есть наворотов много,но таблицы некоторыми браузерами поддерживаются по разному.Если для FireFoxa или Explorera то лучше подключать CSS

Добавленно - 2011-05-06

Zohan1988 пишет:

На мой взгляд если человек неопытен, то лучше использовать тег margin. С javascript новичкам так же будет тяжело разобраться, поэтому лучше использовать готовые шаблоны сайтов, чем забивать их с нуля. Хотя если долго мучаться, то...

Добавленно - 2011-05-27

Splish пишет:

Titov, добавьте к элементу p значения в стиле таблиц:
text-indent:1.2em;

Добавленно - 2012-04-06

Fresnel пишет:

Titov, <blockquote>Отступ с левого края в HTML</blockquote>

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

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =