Содержание

margin-right | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-margin-right

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от правого края элемента

Синтаксис

margin-right: значение | auto | inherit

Значения

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

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-right</title>
  <style>
   body { 
    margin-right: 25%; /* Отступ справа */
    margin-left: 25%; /* Отступ слева */
   }
   .panel {
    background: #007083; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    text-align: justify; /* Выравнивание по ширине */ 
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat.
 
 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin-right

Объектная модель

[window.]document.getElementById(«elementID»).style.marginRight

Браузеры

Браузер Internet Explorer 6 удваивает значение левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Отступы

CSS по теме

  • margin-right

Статьи по теме

  • Внутренняя страница
  • Выравнивание слоя по центру
  • Две колонки, навигация справа
  • Резиновый двухколоночный макет
  • Резиновый дизайн. Двухколонный макет

Рецепты CSS

  • Как поместить фоновый рисунок в правый нижний угол страницы?
  • Как разместить несколько картинок рядом по горизонтали?
  • Как создать рамку со скругленными уголками без изображений?

margin-bottom | htmlbook.

ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчанию0
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-margin-bottom

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от нижнего края элемента

Синтаксис

margin-bottom: значение | auto | inherit

Значения

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

auto
Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>margin-bottom</title>
  <style>
   .layer1 {
    background: #8b0086; /* Цвет фона */
    color: white; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    margin-bottom: -7px; /* Отступ снизу */
   }
   .layer2 {
    margin-left: 40px; /* Отступ слева */
    background: #e9c1e4; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body> 
  <div>
   <big>Lorem ipsum dolor sit amet</big>
  </div> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
  Ut wisis enim 
   ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
   ut aliquip ex ea commodo consequat. 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin-bottom

Объектная модель

[window.]document.getElementById(«elementID»).style.marginBottom

Браузеры

Браузер Internet Explorer 6 в некоторых случаях некорректно вычисляет значение отступа, заданное в процентах.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Отступы

CSS по теме

  • margin-bottom

Статьи по теме

  • Блочные элементы

Рецепты CSS

  • Как изменить расстояние между абзацами текста?
  • Как разместить несколько картинок рядом по горизонтали?
  • Как убрать отступ сверху и снизу от списка?
  • Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

Как делать отступы для текста, абзацев, списков и многого другого в CSS

  • Блог Hubspot
  • HubSpot.
    com

Загрузка

    О нет! Мы не смогли найти ничего подобного.

    Попробуйте еще раз поискать, и мы постараемся.

    Анна Фицджеральд

    Обновлено:

    Опубликовано:

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

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

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

    • Свойство CSS text-indent
    • как сделать отступ текста
    • как сделать отступ абзаца
      • как сделать отступ абзаца кроме первого
    • как делать отступы в списках
    • как делать отступы в пунктах
    • почему свойство text-indent может не работать

    Отступ текста CSS

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

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

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

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

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

    Допустим, вы хотите сместить все элементы div, содержащие текст на странице, вправо на 50 пикселей. Затем, используя div селектора типа CSS, установите для свойства text-indent значение 50px. Вот результат:

    См. Pen Кристины Перриконе (@hubspot) на CodePen.

    Как сделать отступ абзаца в CSS

    Вы можете использовать свойство CSS text-indent для отступа абзаца, используя те же действия, что и выше.

    Просто используйте селектор типа CSS p и установите для свойства text-indent нужное значение. В приведенном ниже примере давайте используем процент. По умолчанию будет отступ только для первой строки.

    См. статью «Как сделать отступ абзаца в CSS» Кристины Перриконе (@hubspot) на CodePen.

    Как пропустить отступ в первом абзаце

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

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

    См. Pen от Кристины Перриконе (@hubspot) на CodePen.

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

    Элемент упорядоченного списка (

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

      Допустим, вы хотите сдвинуть элементы списка дальше вправо, чтобы они выглядели выровненными по правому краю подзаголовка. Затем вы можете установить для свойства padding-left значение 20em. Вот результат по сравнению со списком со стандартным отступом:

      См. Pen Кристины Перриконе (@hubspot) на CodePen.

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

      Подобно элементу упорядоченного списка, элемент неупорядоченного списка (

        ) по умолчанию будет смещать элементы списка — или маркеры. Если вы хотите изменить расстояние отступа, вы можете использовать свойство margin-left или padding-left.

        Предположим, вы хотите сдвинуть маркеры дальше влево, а не вправо. Затем вы можете использовать свойство margin-left и установить для него отрицательное значение. Вот результат по сравнению с маркерами с отступом по умолчанию:

        См. Pen Кристины Перриконе (@hubspot) на CodePen.

        Text-indent не работает

        Вы можете столкнуться с некоторыми проблемами при попытке применить свойство text-indent к элементам HTML. Наиболее распространенная проблема возникает, если вы пытаетесь применить это свойство к встроенным элементам, а не к элементам блочного уровня. Например, если вы попытаетесь сделать отступ для элемента span, это свойство не будет работать. Но это сработает, если вы примените свойство к элементу абзаца или другому блочному элементу. Вот пример:

        См. «Отступ текста пера не работает» Кристины Перриконе (@hubspot) на CodePen.

        Отступы в CSS

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

        Темы: Начальная загрузка и CSS

        Не забудьте поделиться этим постом!

        Связанные статьи

        • Пошаговое руководство по элементу таблицы Bootstrap CSS [+ 7 примеров]

          08 марта 2023 г.

        • hubspot.com/website/bootstrap-navbar»>

          Как создать, отредактировать и создать панель навигации в Bootstrap

          08 марта 2023 г.

        • Как создать идеальную сетку CSS на вашем веб-сайте [примеры макетов]

          28 февраля 2023 г.

        • hubspot.com/website/css-border»>

          Как создавать и стилизовать границы в CSS

          23 февраля 2023 г.

        • Как вложить селекторы CSS для более чистого кода

          20 февраля 2023 г.

        • com/website/bootstrap-image-classes»>

          Классы изображений Bootstrap: что это такое и как они работают?

          20 февраля 2023 г.

        • CSS-переменные: что это такое и как они работают

          16 февраля 2023 г.

        • hubspot.com/website/what-is-a-favicon»>

          Что, почему и как сделать фавикон для вашего сайта

          08 февраля 2023 г.

        • Введение в свойство отображения CSS

          02 февраля 2023 г.

        • Кнопки Bootstrap: объяснение классов и стилей

          02 февраля 2023 г.

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

        html

        9 месяцев назад

        Аднан Шаббир

        Как мы все знаем, HTML-документы очень похожи на документы MS Word, но единственная разница заключается в том, что HTML используется для создания веб-страниц, а MS Word используется для создания простых файлов документов. Вы когда-нибудь задумывались, как мы форматируем текст так же, как MS Word в HTML? В MSword мы делаем отступы для текста и абзацев, но что, если мы хотим сделать отступ для абзаца и текста в HTML?

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

        • Как сделать отступ в HTML
        • Как сделать отступ в HTML с помощью тега pre
        • Как сделать отступ в HTML, используя свойство margin-left
        • Как сделать отступ в HTML, используя свойство text-indent

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

        Отступ — это процесс определения пробелов слева или справа от абзаца. В HTML существует три подхода к отступу в HTML: тег

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

            
         
         
         В приведенном выше примере мы используем тег 
        , заключенный вокруг некоторого текста.
          Вывод 
         Из вывода видно, что абзац отображается так, как он был написан в исходном коде.
         Как сделать отступ в HTML с помощью свойства margin-left 
         Мы также можем использовать свойство CSS margin-left для отступа текста в HTML. Следующий пример поможет вам лучше понять.
          Пример 
         
            
         
                
        Отступ HTML
         
                
         
                    В HTML отступы не нужны, потому что браузеры автоматически удаляют лишние пробелы, но если вы хотите, чтобы текст выглядел хорошо для читателя, тогда отступы вам пригодятся. 
                
         
            
         
         В приведенном выше примере мы используем свойство CSS margin-left в теге 
          для отступа в HTML. Значение свойства margin-left установлено на  50px .
          Выходные данные 
         Эти выходные данные показывают, что свойство margin-left добавляет пробел слева от абзаца и перемещает весь абзац вправо.
         Как сделать отступ в HTML с помощью свойства text indent 
         Свойство text-indent добавляет пробел слева от первой строки абзаца для отступа в HTML. Следующий пример поможет вам лучше понять.
          Пример 
         
            
         
                
        Отступ HTML
         
                
         
                    В HTML отступы не нужны, потому что браузеры автоматически удаляют лишние пробелы, но если вы хотите, чтобы текст выглядел хорошо для читателя, тогда отступы вам пригодятся. 
                
         
            
         
         В приведенном выше примере мы используем свойство text-indent CSS для тега 
          для создания отступа в HTML.
          Выходные данные 
         Эти выходные данные показывают, что свойство text-indent добавляет пробел слева от первой строки абзаца, чтобы сделать отступ абзаца.
         Заключение 
         В HTML отступы выполняются с помощью свойства text-indent, тега  
          и свойства margin-left.
        No related posts.