Как с помощью html сделать отступы. Отступ сверху CSS: позиционирование контента

image

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться ×

Перевод статьи «How to Understand and Work With CSS Margins».

image

CSS имеет дурную привычку вести себя не так, как ожидается. И одна из вещей, которые больше всего сбивают людей с толку, это внешние отступы (margin). Кажется, что здесь все должно быть довольно просто, но эти отступы способны приводить к очень странным проблемам.

Для людей, лишь начинающих работать с CSS, свойство margin легко становится одной из вещей, заставляющих думать, что «это идиотский, бессмысленный язык!».

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

Внешние отступы это в определенном смысле модель всего CSS. CSS кажется настолько простым с его парами «свойство: значение», но по мере того как вы углубляетесь в него, вы начинаете понимать, что все гораздо сложнее.

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

Это раздражает.

В этой статье я надеюсь пролить свет на некоторые вопросы работы margin-ов. Мы рассмотрим несколько распространенных проблем, возникающих при применении этого свойства, а также простые решения этих проблем.

Что такое margin?

Прежде чем двинуться дальше, я хотел бы удостовериться, что все мы знаем, что из себя представляют эти самые margin-ы!

Я предположу, что все знают, что внешние отступы это часть блочной модели. В этой модели margin это то, что находится снаружи, т. е., идет после контента, внутреннего отступа (padding) и границы (border).

MDN очень хорошо объясняет, что такое margin:

«Margin это самый внешний слой, окружающий контент, padding и border. Это пустое пространство между блоком, к которому margin относится, и другими элементами. Размер этого пространства контролируется свойством margin и его значениями».

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

Стили браузера (user-agent stylesheets)

Браузеры по умолчанию имеют удивительно большое количество CSS, т. н. user-agent stylesheets. Именно благодаря этим стилям элемент

как я могу отступать, начиная со второй строки абзаца?

Я пробовал

p {     text-indent: 200px; } p:first-line {     text-indent: 0; } 

и

p {     margin-left: 200px; } p:first-line {     margin-left: 0; } 

и

(with position:relative;) p {     left: 200px; } p:first-line {     left: 0; } 

222   5  

5 ответов:

это буквально только вторая строка, которую вы хотите отступить, или это С вторая строка (т. е. а выступ)?

Если это последнее, что-то вроде этого JSFiddle было бы уместно.

HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

CSS

div {     padding-left: 1.5em;     text-indent:-1.5em; }  span {     padding-left: 1.5em;     text-indent:-1.5em; } 

в этом примере показано, как использование одного и того же синтаксиса CSS в DIV или SPAN создает разные эффекты.

это сработало для меня:

p { margin-left: -2em;   text-indent: 2em   } 

сделать левое поле: 2em или так будет толкать весь текст, включая первую строку справа 2em. Чем добавить текст-отступ (применимо к первой строке) как-2em или около того.. Это возвращает первую строку, чтобы начать без маржи. Я пробовал его для списка тегов

     ul li{       margin-left: 2em;       text-indent: -2em;     }  

Если вы стиль как список

вы можете «выравнивание текста: начальный» и последующие строки будут все отступы. Я понимаю, что это может не соответствовать вашим потребностям, но я проверял, есть ли другое решение, прежде чем я изменю свою разметку..

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

мне нужно было отступить две строки, чтобы разрешить большее первое слово в пункте. Громоздким одноразовым решением является размещение текста в элементе SVG и позиционирование его так же, как и . Использование float и тега высоты SVG определяет, сколько строк будет отступом, например

 Lorum Ipsum  dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
  • высота и ширина SVG определяют заблокированную область.
  • Y=36-это глубина до базовой линии текста SVG и такая же, как размер шрифта
  • margin-top позволяет обеспечить наилучшее выравнивание SVG text и para text
  • использовал первые два слова здесь, чтобы напомнить уход, необходимый для потомков

Да, это громоздко, но это также зависит от ширины родительского блока div.

приведенный выше ответ был на мой собственный запрос, чтобы первое слово (ы) пара было больше и располагалось над двумя строками. Чтобы просто отступить первые две строки para, вы можете заменить все теги SVG следующим однопиксельным img:

Свойство padding определяет величину отступа между границами элемента и его содержимым

Значения:

auto — определяется броузером

num — число с единицами измерения

Пример:

.p { padding : 20px; }

от каждой стороны по 20px

существует возможность задавать отступ от какой-то одной стороны: padding-top, padding-right, padding-bottom, padding-left

Пример:

.p { padding-left : 30px; }

существует краткая запись задания разных отступов от каждой стороны: padding(отступ сверху, отступ справа, отступ снизу, отступ слева)

Порядок строго как указан!

Пример:

.p { padding : 10px 30px 20px 80px; }

Свойство margin определяет величину отступа между границами элемента и соседними элементами

Значения:

auto — определяется броузером

num — число с единицами измерения

Пример:

.p { margin : 20px; }

от каждой стороны по 20px

существует возможность задавать отступ от какой-то одной стороны: margin-top, margin-right, margin-bottom, margin-left

Пример:

.p { margin-left : 30px; }

существует краткая запись задания разных отступов от каждой стороны: margin(отступ сверху, отступ справа, отступ снизу, отступ слева)

Порядок строго как указан!

Пример:

.p { margin : 10px 30px 20px 80px; }

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

Итак, свойство margin задает отступ снаружи от границы элемента.

Давайте посмотрим, как это выглядит на практике.

Для начала приведу вам два вложенных друг в друга блока без margin (они слипнутся и мы увидим двойную границу):

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; }

Так код будет выглядеть в браузере:

А теперь давайте зададим margin в 30px внутреннему блоку:

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin: 30px; }

Так код будет выглядеть в браузере:

Для определенной стороны

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

Давайте поставим левый отступ в 30px с помощью margin-left:

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin-left: 30px; }

Так код будет выглядеть в браузере:

А теперь верхний отступ в 30px с помощью margin-top:

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin-top: 30px; }

Так код будет выглядеть в браузере:

А сейчас одновременно правый отступ 30px с помощью margin-right и нижний отступ 10px с помощью margin-bottom

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin-right: 30px; margin-bottom: 10px; }

Так код будет выглядеть в браузере:

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

Четыре значения

Давайте посмотрим на примере, как работает margin, когда ему задано четыре значения. Пусть у нас сделано так: margin: 10px 20px 30px 40px. В этом случае 10px это отступ сверху, 20px — справа, 30px — снизу, 40px — слева. То есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево.

Этому правилу следует подавляющее большинство CSS свойств (кроме border-radius, у него все начинается с верхнего левого угла и тоже идет по часовой стрелке, то есть, в принципе, и тут все похоже).

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin: 10px 20px 30px 40px; }

Так код будет выглядеть в браузере:

Два значения

Если передать свойству margin два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе — одновременно и справа, и слева.

Давайте посмотрим пример:

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin: 10px 30px; }

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если передать свойству margin три значения, то первое будет задавать отступ сверху, третье — отступ снизу, а второе — одновременно отступ слева и справа.

Давайте посмотрим пример:

 
#red { width: 300px; border: 1px solid red; } #green { height: 100px; border: 1px solid green; margin: 10px 20px 30px; }

Так код будет выглядеть в браузере:

Значение auto

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

В примере ниже внутренний блок станет по центру:

 
#red { width: 100%; border: 1px solid red; } #green { height: 100px; width: 200px; border: 1px solid green; margin-top: 10px; margin-bottom: 10px; margin-left: auto; margin-right: auto; }

Так код будет выглядеть в браузере:

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

Давайте перепишем пример в сокращенной форме через одно свойство-сокращение margin (первое значение будет задавать верх-низ, а втрое — право-лево):

 
#red { width: 100%; border: 1px solid red; } #green { height: 100px; width: 200px; border: 1px solid green; margin: 10px auto; }

Так код будет выглядеть в браузере:

Если нам нужны разные верхний и нижний отступ margin, то можно передать три значения: первое задаст верхний отступ, третье — нижний, а второе задаст значение auto для правого и левого отступов:

 
#red { width: 100%; border: 1px solid red; } #green { height: 100px; width: 200px; border: 1px solid green; margin: 30px auto 10px; }

Так код будет выглядеть в браузере:

В принципе, можно написать и четыре значения таким образом: margin: 30px auto 10px auto, но с тремя значениями писать все-таки меньше (зато сложнее понять).

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

Работает оно по такому же принципу — есть свойства padding-left, padding-right, padding-top и padding-bottom, которые задают отступ для разных сторон. Также для свойства padding можно задавать 1, 2, 3 или 4 значения по такому же принципу, как и в margin.

Единственное отличие — это то, что значения auto для свойства padding не существует.

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

 
div { width: 300px; border: 1px solid red; text-align: justify; }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

А теперь зададим padding в 30px для всех сторон:

 
div { width: 300px; border: 1px solid red; text-align: justify; padding: 30px; }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Свойство padding для определенной стороны

Давайте зададим отступы, используя padding-left, padding-right, padding-top и padding-bottom:

 
div { width: 300px; border: 1px solid red; text-align: justify; padding-top: 10px; /* сверху */ padding-right: 20px; /* справа */ padding-bottom: 30px; /* снизу */ padding-left: 40px; /* слева */ }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

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

Четыре значения

 
div { width: 300px; border: 1px solid red; text-align: justify; padding: 10px 20px 30px 40px; }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Два значения

 
div { width: 300px; border: 1px solid red; text-align: justify; padding: 60px 30px; }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Три значения

 
div { width: 300px; border: 1px solid red; text-align: justify; padding: 10px 20px 30px; }

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть и padding, и border расширяют блок (и по ширине, и по высоте).

В следующем примере оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого — нет. Посмотрите, как отличаются их размеры:

width: 300px; height: 100px; padding: 0px. width: 300px; height: 100px; padding: 50px.

А сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 20px, а у первого — нет. Посмотрите, как отличаются их размеры:

width: 300px; height: 100px; width: 300px; height: 100px; border: 20px solid black;

Если вам мешает расширение блоков из-за padding и границы, их поведение можно исправить свойствами outline (используется вместо границы) и box-sizing (отменяет расширение блоков).

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

Мы с вами еще в начале книги разбирались со списками ul и ol и вы наверняка помните о том, что список ul имеет маркеры в виде точек, а ol — в виде цифр. Однако, вид этих маркеров можно сменить или даже убрать их совсем.

Например, для списка ul можно сделать маркеры в виде квадратов или кружков, а для списка ol — нумерацию не только в виде цифр, а в виде латинских или греческих букв.

Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul:

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

ul { list-style-type: square; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

ul { list-style-type: circle; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

ul { list-style-type: disc; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значение none

Значение none убирает маркеры совсем:

ul { list-style-type: none; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Значения для списка ol

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

ul { list-style-type: lower-roman; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.
  4. Четвертый пункт.
  5. Пятый пункт.

А теперь сделаем нумерацию не числами, а маленькими латинскими буквами:

ul { list-style-type: lower-alpha; }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  1. Первый пункт.
  2. Второй пункт.
  3. Третий пункт.
  4. Четвертый пункт.
  5. Пятый пункт.

Весь список возможных значений для ol очень большой и я не буду приводить его здесь. Смотрите его в справочнике CSS для свойства list-style-type.

Можно также задавать свои маркеры. Для этого необходимо иметь картинку, которую вы бы хотели сделать для маркеров списка, и подключить ее с помощью свойства list-style-image: url(«путь к картинке»).

Смотрите пример:

ul { list-style-image: url("li.gif"); }
 Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт. 

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

По умолчанию маркеры списка не входят в сам список.

Чтобы понять, что имеется ввиду, давайте разберем следующий пример. В данном случае тегу ul обнулен padding и, казалось бы, маркеры списка должны прижиматься к границе блока, но они вылазят наружу! Это говорит о том, что не они реагируют на padding, а текст списка:

div { border: 1px solid red; }  ul { padding: 0; list-style-position: outside; }
  Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт.  

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Такое поведение можно поменять, если воспользоваться свойством list-style-position, которое принимает два значения: outside (то, что мы видим по умолчанию) и значение inside, которое делает так, что маркеры оказываются внутри списка:

div { border: 1px solid red; }  ul { padding: 0; list-style-position: inside; }
  Первый пункт. Второй пункт. Третий пункт. Четвертый пункт. Пятый пункт.  

Так код будет выглядеть в браузере:

  • Первый пункт.
  • Второй пункт.
  • Третий пункт.
  • Четвертый пункт.
  • Пятый пункт.

Существует также свойство-сокращение list-style, которое позволяет одновременно задать тип маркера, его позицию и картинку.

Изучите свойства по следующим ссылкам: min-width, max-width, min-height, max-height.

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

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Предыдущая страница Следующая страница

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

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

Основные правила позиционирования

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

Особое значение имеет отступ сверху. CSS внутри блока связывает правила внутренних отступов с правилами абсолютно и относительно позиционированных элементов внутри этого блока.

image

Обычная практика CSS-правил: можно указать отступы со всех сторон одинаково, попарно сверху/снизу и справа/слева либо для каждой стороны отдельно. Например,

  • margin: 10px;
  • padding: 10px20px;
  • padding: 10px20px30px40px.

В первом случае устанавливается отступ элемента от сторон внешнего контейнера, в котором он находится. Во втором случае отступы сверху и снизу равны 10px, слева и справа — 20px. В третьем случае указаны размеры отступов по всем сторонам: сверху, справа, снизу и слева.

Во всех указанных случаях отступ сверху CSS равен 10 px.

Правила, изменяющие положение элементов

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

image

Если определить отступ сверху CSS в элементе scCurrInfo, цель будет достигнута, а если на уровне li — нет.

image

В данном примере использование правила padding: 40px; требует адекватного уменьшения правил width и height на 80px. В противном случае размер блока scCurrInfo вылезет за границы внешнего блока.

image

Если убрать правило padding из описания scCurrInfo, но добавить его со значением 20px в описание стиля элемента списка, получим только отступ сверху. CSS не применит это значение к другим сторонам.

Естественно, такое использование правила отступа относится к каждому элементу li.

Общая практика форматирования контента

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

image

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

Между тем у таблиц, кроме очевидных недостатков, есть множество качественных преимуществ. Создавая отступы сверху, CSS учитывает отступы слева, справа (снизу — это особенный момент). Правила ячеек таблицы позволяют управлять выравниванием как по вертикали, так и по горизонтали. Используя стили рядов, комбинируя их со стилями ячеек, можно формировать сложные представления контента.

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

Абсолютное позиционирование

Блок с правилом POSITION: absolute ; будет находится в месте, установленном его координатами относительно блока, в котором он находится.

image

Характерная черта правил CSS — «практика — лучший критерий истины» в большинстве случаев, особенно когда требуется кроссбраузерность и верстка производится вручную, предпочтительнее изучения полноценных мануалов по каскадным таблицам стилей.

Использование таблиц часто приводит к проблемам смещения содержимого ячеек. Аналогичное смещение внутри блока влияет не всегда и не на все элементы. Экспериментируя, можно добиться желаемого результата. Тривиальную задачу: как убрать отступ сверху, CSS не всегда решает тривиальным образом.

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

Добрый день уважаемые читатели. Сегодня короткая заметка о том как сделать красную строку для каждого абзаца на html — странице . Если кто не знает, то красная строка это отступ первой строки в блоке текста. Такой отступ в абзацах можно встретить практически в любом печатном тексте, но при создании веб-сайтов оформление красной строки встречается довольно редко, несмотря на то, что она позволяет гораздо удобнее воспринимать текст. На случай если вдруг заказчик потребует, чтобы абзацы на его сайте начинались с красной строки, то привожу для вас простой рецепт решения этой задачи.

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

Свойство text-indent имеет простой синтаксис:

text-indent: <значение> | <проценты> | inherit

В качестве значений можно указывать пиксели (px), пункты (pt) другие единицы принятые в CSS. Значение определяет на сколько сдвинуть текст первой строки в право от исходного положения. Допустимо указывать отрицательные значения, тогда текст сдвинется влево. При указании процентных значений, отступ первой строки вычисляется в зависимости от ширины блока текста.

Если красную строку необходимо добавить только в один абзац, то можно сделать так:

Результат:

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

Либо к абзацам, которые должны начинаться с красной строки добавляем атрибут class и добавляем нужный стиль:

Результат:

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

Теперь вы запросто сможете сделать красную строку на своих html страницах . До новых встреч!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<<span>p style =»text-indent:100px» > HTML отступ текста , работает стиль CSS — text-indent </<span>p >

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

HTML отступ текста слева, используем изображение

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

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

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

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

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

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

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

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

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

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

Слева (margin-left).

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

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

Снизу (margin-bottom).

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

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

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

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

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

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

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

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

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

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

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

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

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

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий