Как сделать отступы или табуляцию в HTML? Как сделать отступ в html сверху


Как сделать (задать) отступ текста и изображения в html (сверху, снизу, справа, слева)

Добрый день дорогие друзья читатели моего блога! С Вами на связи снова Макс Метелев и сегодня мы продолжим говорить про тему создания сайтов, в частности, мы поговорим про то как сделать отступ текста в html документе.

Чтобы наша страничка, а точнее ее содержимое не прилипало к границам сайта, существуют два типа отступов. Это:

Вкратце расскажу про эти два атрибута CSS.

Атрибут margin позволяет сделать отступ целых блоков с содержимым. Ведь мы верстаем наши сайты с помощью div верстки, соответственно, наш сайт представляет собой совокупность различных блоков (так называемых «строительных кирпичей»), которые мы будем перемещать так как нам нужно. Мы можем перемещать блоки вправо, влево, а также вверх и вниз. У margin есть следующие свойства

  • Margin-right — (позволяет делать отступ блоков и элементов html страницы справа)
  • Margin-left — (делает html отступ слева)
  • Margin-bottom — (снизу)
  • Margin-top (сверху)

Вот пример

отступ между картинками margin

Отступ между картинками margin теперь стал 150px

Вот код для вставки:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Отступы в html документе</title> </head> <body> <div><img src="img/car.jpg" alt="машина"/></div> <div><img src="img/car1.jpg" alt="еще одна машина" /></div> </body> </html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Отступы в html документе</title>

</head>

<body>

<div><img src="img/car.jpg" alt="машина"/></div>

<div><img src="img/car1.jpg" alt="еще одна машина" /></div>

</body>

</html>

Как сделать отступ html текста с помощью атрибута padding

Атрибут padding  дает возможность тексту и любому другому контенту перемещаться свободно внутри блока. Вот как это показано на рисунке

Отступ текста от картинки padding

Здесь мы видим что между картинкой и текстом сделан отступ в 30px.

Вот исходники кода для вставки:

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Отступы в html документе</title> </head> <body> <div><img src="img/car.jpg" alt="Машина" /></div> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Английский перевод 1914 года, H. Rackham "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?" Абзац 1.10.33 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Английский перевод 1914 года, H. Rackham "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Отступы в html документе</title>

</head>

<body>

<div><img src="img/car.jpg" alt="Машина" /></div>

<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 

Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.

 

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

 

Английский перевод 1914 года, H. Rackham

 

"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"

 

Абзац 1.10.33 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.

 

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

 

Английский перевод 1914 года, H. Rackham

 

"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p>

</body>

</html>

Также как и margin, padding имеет свои свойства. Они следующие:

  • Padding-right (отступ внутри справа)
  • Padding-left (html отступ слева)
  • Padding-top (сверху)
  • Padding-bottom (снизу)

Также если вам нужно только в одном месте применить, допустим отступ строки, то это можно сделать с помощью самого простого способа – добавить перед текстом html код пробела. Выглядит он следующим образом —  &nbsp

Все эти способы рабочие и используются часто. Просто запомните если вы хотите отступить внутри блока, то используете padding, если хотите «двигать» блоки на странице, то margin вам в помощь

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

Смотрите внимательно этот видеоурок и просто повторяйте за мной.

 

 

smarticle.ru

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

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

<div style=”margin-left:20px;”> Текст блока HTML </div>

<div style=”margin-left:20px;”> Текст блока HTML </div>

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

<div> Текст блока </div>

<div> Текст блока </div>

CSS:

.text-block { margin-left:20px; }

.text-block {

margin-left:20px;

}

html отступ текста Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

  • margin-left — расстояние слева
  • margin-right — расстояние справа
  • margin-top — расстояние сверху
  • margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

  • margin: 10px; — делаем отступ текста 10px со всех сторон
  • margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
  • margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега <a>, <span>, <b> — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными. Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

Вотступ

<div style=”paddint-top:20px;”> Текст блока </div>

<div style=”paddint-top:20px;”> Текст блока </div>

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:

CSS:

.text-block { padding: 20px 10px 15px 20px; }

.text-block {

padding: 20px 10px 15px 20px;

}

Как задать параметры внутреннего отступа

С его помощью так же можно задать разные отступы текста в HTML:

  • padding-left — слева
  • padding-right — справа
  • padding-top — сверху
  • padding-bottom — расстояние снизу
  • padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

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

  • Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько   вы можете увеличить расстояние между словами.
  • Если поставить   между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько   (каждый с новой строки) можно увеличить это расстояние.

HTML:

<p>Задаём &nbsp; в HTML</p>

<p>Задаём &nbsp; в  HTML</p>

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent

HTML:

<div> Здесь текст HTML блока</div>

<div> Здесь текст HTML блока</div>

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.

Успехов вам в оформлении ваших сайтов и не только!

С уважением Юлия Гусарь

impuls-web.ru

Как сделать отступ сверху CSS?

Приветствую вас, дорогие посетители, на сайте Impuls-Web!

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

В этих случаях нам необходимо задать отступ сверху CSS-стилями для достижения нужного нам результата. В свою очередь, в зависимости от ситуации мы можем использовать внутренний или внешний отступ сверху CSS.

Навигация по статье:

Внешний отступ сверху CSS

Для задания внешнего верхнего отступа используется CSS-свойство margin-top, значение которого можно задать в px (пикселях), em, % и других доступных в CSS единицах измерения.

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

Пример использования:

.margin-block{ margin-top:50px; }

.margin-block{

margin-top:50px;

}

Верхний отступ CSS

Аналогично, для выравнивания блока вы можете использовать свойства margin-left, margin-right, margin-bottom. Так же можно указать свойство margin, и задать для него четыре параметра, по часовой стрелке начиная с верхней стороны, соответственно для каждой из сторон:

margin: 20px 50px 30px 50px;

margin: 20px 50px 30px 50px;

margin: сверху справа снизу слева

Внешние отступы CSS

Внутренний отступ сверху CSS

В ситуации, когда нам нужно выровнять контент по вертикали, относительно родительского блока мы можем использовать свойство padding-top, которое задает внутренний отступ сверху CSS. Параметры свойства задаются аналогично свойству margin в px, em, % и т.д.

Пример:

.padding-block{ padding-top: 50px; }

.padding-block{

padding-top: 50px;

}

Внетренний отступ сверху CSS

Аналогично свойству margin, свойство padding можно использовать для задания отступов с других сторон блока по отдельности: padding-left, padding-right, padding-bottom. А так же можно задавать расстояния для всех сторон одновременно:

padding: 20px 50px 30px 50px;

padding: 20px 50px 30px 50px;

Внутренние отступы CSS

В этом случае значения задаются аналогично как и для margin начиная сверху, а дальше по часовой стрелке (справа, снизу, слева)

Используя, в зависимости от ситуации, показанные в статье способы задания отступов сверху CSS-свойствами margin и padding, вы сможете расположить необходимые вам блоки на странице своего сайта именно так как вам нужно.

Надеюсь, данная статья будет для вас полезна! Не забывайте оставлять комментарии и делиться статьей в соцсетях.А на сегодня у меня все! Успехов вам и до встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

CSS отступ слева, справа, сверху и снизу на простом примере

Здравствуйте! Изначально хотел разделить эту статью на 4 маленьких, но потом задумался. Зачем? Ведь удобнее, когда такая информация собрана в рамках одного материала.

Поэтому сегодня мы узнаем, как сделать CSS отступ слева и со всех остальных сторон – справа, сверху и снизу. Их можно делать для картинок и текстов. Они бывают двух видов:

  • Внешние;
  • Внутренние.

Для первых используется ключевое свойства margin, для вторых – padding. Для наглядности сделал для вас небольшой пример. Чтобы визуально было удобно различать внутреннее и внешнее пространство добавил видимую таблицу. Взглянем, что получилось?

Внешние отступы

Прописав их в файле стилей CSS, получится задать ориентацию информационного блока на странице. Например, сдвину его влево и вниз. Давайте сразу продемонстрирую, как это будет выглядеть.

Чтобы это сделать, я добавил к тегу таблицы свойство стилей и прописал их в соответствующем файле.

В целом можно применять нижеперечисленные варианты для задания отступов.

Слева (margin-left).

Справа (margin-right).

Сверху (margin-top).

Снизу (margin-bottom).

Сейчас покажу еще классный нюанс.

Как видите, можно использовать один из вариантов – эффект одинаковый. Только во втором случае код получается более компактным. Также заметьте, что отступы задаются по часовой стрелке. Все начинается сверху и заканчивается слева.

Внутренние отступы

Порядок действий здесь похожий. Только теперь добавлю новые свойства не для всей таблицы, а для содержимого столбцов.

Смотрим, что из этого вышло.

По аналогии с внутренними отступами в CSS внешние можно прописывать сокращенным кодом или для сторон по отдельности.

Padding-top.

Padding-right.

Padding-bottom.

Padding-left.

Это были основные моменты. Напоследок покажу, как еще можно облегчить некоторую работу.

Отступы на уровне выбранных тегов

В случаях, которые посмотрели выше, они задаются для текста и картинок одновременно. На самом деле можно задать расстояние до элементов на уровне определенного тега. Покажу, как это работает. Отменяю последние изменения и указываю специальный код в файле стилей.

p{

padding-left:150px;

}

Взглянем, что произошло после сохранения изменений.

Картинка осталась на месте, слева сместился только текст, заключенный в теги абзаца. Похожие манипуляции можно применять и к другим блокам, например, tr, span.

На сегодня тема задания в CSS отступов слева, справа и по другим сторонам завершена. Вопросы остались? Их можете задать в комментариях, как и поделиться собственным мнением. Случайно не знаете более удобных способов? Будет здорово, если расскажете о них.

В качестве дополнительной информации предлагаю для ознакомления публикацию о задании отступов в HTML. Там тоже описаны достаточно интересные способы. Может пригодиться для формирования красной строки в тексте или проведения других действий.

У меня в социальных сетях есть группы и страницы. Туда я периодически добавляю небольшие анонсы новых публикаций. Вы зарегистрированы в Вконтакте, Одноклассниках, Twitter или Facebook?

Дополнительно работает подписка на бесплатную рассылку информации по электронным адресам. Для подписки на блоге есть специальная форма. До связи.

workip.ru

Как сделать отступы или табуляцию в HTML?

Есть разные способы установки HTML отступов перед текстом. Но для совместимости с различными браузерами и доступности, мы обсудим самые популярные методы:

Рекомендованный способ в CSS и HTML

Чтобы сделать отступ перед текстом или абзацем, лучше использовать CSS. Ниже приведены примеры того, как смещать надписи с помощью каскадных таблиц стилей. Вставьте каждый из приведенных примеров кода между тегами HTML <head></head>.

Следующий код создает CSS-класс «tab», который отодвигает символы и абзац на 40 пикселей от левого края:

<style type="text/css"> <!-- .tab { margin-left: 40px; } --> </style>

Вставив приведенный выше код в раздел <head>, можно выполнить его в любом месте, добавляя его в теги абзаца (<p>), как показано ниже:

<p>Образец табуляции</p>

Если вы планируете применять этот стиль на нескольких страницах, лучше создать файл .css и связать его со всеми веб-страницами. Чтобы сделать отступ в HTML, добавьте следующую строчку между тегами <head> и создайте ссылку на файл. Мы назвали его «basic.css«:

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">

Как только файл каскадных таблиц стилей создан, откройте его для редактирования и добавьте тот же код, кроме тега <style> и меток комментирования, как показано ниже:

.tab { margin-left: 40px; }

Когда эти шаги выполнены, можно табулировать любой текст, используя тот же самый <p>, показанный выше.

Есть и другие варианты. Например, если нужно сместить только первую строку абзаца, то примените приведенный ниже код:

.tab { text-indent:40px }

Подсказка: Можно задавать величину отступа в процентах. Например, вместо смещения на 40 пикселей, можно сдвинуть строки на 5% от текущего положения. Можно использовать и длинный пробел при определении нужной ширины.

Бонусная подсказка как сделать отступ в HTML: Чтобы поменять отступ слева на отступ справа, измените свойство margin-left на margin-right.

Рекомендованный метод в HTML

Можно достичь тех же результатов используя стиль, встроенный в HTML- код. Хотя применение CSS делает управление многочисленными веб-страницами легче, если использовать стиль только один раз:

<p>Это текст с отступом.</p>

Тут весь текст абзаца смещен на 40 пикселей влево. Другие теги <p> не смещены.

<p>Это текст с отступом.</p>

А здесь только первая строка в абзаце смещается на 40 пикселей слева. Никакие дополнительные строки смещены не будут.

Подсказка: можно задать отступ с помощью процентов. Например, вместо смещения на 40 пикселей, можно заменить значение на 5%, чтобы сдвинуть текст на 5%.

Бонусная подсказка: Можно поменять отступ слева на отступ справа, изменив свойство margin-left на margin-right.

Альтернативный метод

Другой часто применяемый метод HTML отступа текста — с помощью <blockquote>, как показано ниже.

Хотя это намного легче, но есть проблемы совместимости, которые могут возникнуть из-за применения этого решения. Данный тег предназначен для цитирования, а не смещения:

<blockquote>Эта строка будет сдвинута.</blockquote>

Перевод статьи “How do I indent or tab text on my web page or in HTML?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Отступ в HTML - Баламут Чума

Източник.

      HTML отступ текста – в процессе создания сайта, нам много приходится работать с текстовыми блоками, или текстовыми фразами.         Однажды, мне нужно было добавить текстовую фразу, таким образом, чтобы перед этой текстовой фразой был некоторый отступ текста от края html блока, в который данный текст добавлялся.

      Казалось бы, простая задача, но в процессе ее решения, я столкнулся с тем, что данную задачу можно решить несколькими способами. В этой статье я хочу поделиться,   каким образом, можно сделать отступ текста используя  средства html.

      Итак, html отступ текста, способ первый - самый, естественный и простой. Чтобы сделать отступ перед текстом,  добавим перед текстом html код пробела - &nbsp; Добавить html код пробела  можно в любом html редакторе.

      Привожу пример рабочего кода задания отступа для текста, с помощью кода пробела:

<html> <head> <title>HTML отступ текста</title> </head> <body> <p>&nbsp;&nbsp;&nbsp;&nbsp; HTML отступ текста слева, используем код пробела</p> </body> </html>

        В данном примере, перед выбранным нами текстом код пробела - &nbsp; добавлен четыре раза, в результате, получим нужный нам отступ.

      Мы знаем, что код пробела отрабатывается любым браузером. Поэтому, добавив необходимое количество пробелов  перед текстом, можно получить необходимый отступ для текста.

      Этот способ хорош тем, что он будет гарантированно отработан любым браузером.

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

      Одним из вариантов решения этой проблемы, является следующий способ задания отступа.

      HTML отступ текста, способ второй - этот способ основан на свойствах тега blockquote.  Данный тег задает отступ примерно 40 пикселей  слева и справа, для размещенного в нем текста. Кроме того, отступ задается сверху и снизу. Пример html кода использования  данного способа приведен ниже:

<p><blockquote> HTML отступ текста слева, используем тег blockquote </blockquote></p>

      Как видите, данный способ задания отступа для текста, очень прост в использовании, но и этот способ тоже имеет существенный недостаток. Отступ, который задает тег blockquote, является фиксированным и всегда равен одной и той же величине – 40px.

      Чтобы исправить ситуацию, и  при добавлении html отступа для текста иметь возможность задать любую величину, воспользуемся третьим способом.

      HTML отступ текста, способ третий.

        Здесь мы воспользуемся свойством параметра  text-indent каскадных таблиц стилей CSS.

      Если открыть справочник CSS, на странице с описанием свойств text-indent, то мы увидим, что с помощью text-indent,  мы можем задавать величину отступа первой строки или первого абзаца, какого-либо блока текста.

      Мы рассматриваем, пример с коротки текстовым блоком, поэтому  свойства text-indent вполне подходят для нашего случая.

      Ниже приведен html код, который формирует отступ текста с использованием text-indent. Из примера видно, что задавая для text-indent  разные значения аргументов, мы можем изменять величину отступа текста:

<p> HTML отступ текста, работает стиль CSS - text-indent </p>

      На мой взгляд, этот способ задания отступа для текста, является самым оптимальным, но, тем не менее, рассмотрим еще один способ задания отступа, с использованием изображений.

      HTML отступ текста, четвертый способ - здесь мы, для задания отступа, будем использовать изображение.

      В качестве рабочего примера, сразу рассмотрим html код, который демонстрирует работу данного способа:

<p><img src=image.png width=150 height=1> HTML отступ текста слева,  используем изображение </p>

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

      В качестве изображения можно использовать изображение, ширина и высота которого, равны одному пикселу.  Чтобы применяемое нами изображение не было видно на странице, зададим для него цвет точно такой же, как фона страницы сайта.

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

      Автор: Виктор Милованов

balamut4uma.livejournal.com

Управление отступами в html на css

С появлением свойств управления отступами на css у web разработчиков появились огромные возможности по управлению интерфейсом и дизайном страниц сайтов. До этого отступами управляли при помощи таблиц, что являлось значительно более сложным и объемным. 

 

Рассмотрим основные свойства управления отсутпами.

 

Управление внешними отсупами в HTML на CSS при помощи свойства margin

 

Свойство css margin позволяет управлять именно внешними отступами. Допустим имеется изображение, для которого нужно указать внешние отсупы: 30 пикселей сверху, 20 слева, 10 справа и 5 снизу. 

 

Для задания отсупа сверху мы пропишем: margin-top: 30px

Для задания отступа слева: margin-left: 30px

Отступ справа: margin-right: 10px

И снизу: margin-bottom: 5px

 

Можно все объединить, прописав следующее: margin: 30px 10px 5px 20px;

Например зададим эти отступы для изображения. Получаем следующий html код: 

 

<img src="vnesh-otstup.jpg">

 

На видно как изображение сместилось относительно родительского элемента. vneshn-otstupi

 

Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.

 

Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;

 

Три значения: margin:10px 20px; 30px;. Здесь сверху будет отступ 10 точек, слева и справа по 20, а снизу 30.

 

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

 

margin-top

 

Также можно прописать значение auto. Здесь внешний отступ будет рассчитан браузером автоматически.

 

Еще одно значение inherit. Здесь параметры дублируются из родительского (вышестоящего по структуре) элемента.

Управление внутренними отступами в HTML на CSS при помощи свойства padding

Ситуация с параметром padding аналогична предыдущей (margin). Единственное и главное отличие в том, что здесь отступы задаются внутри элемента.

 

Например вам нужно задать внутренний отступ в ячейке таблицы. Нужно будет прописать следующее:

 

<td>Текст</td>

 

Таким образом вокруг слова "Текст" появятся внутренние отступы в 5 точек со все четырех сторон.

 

padding

 

Итак, за внешний отступ на CSS отвечает параметр margin, за внутренний отступ CSS - параметр padding. 

 

vneshnii-vnutr-otstup

webriz.ru