Отступ html снизу – Между заголовком и основным текстом слишком большой отступ, как его уменьшить?

Leave a Comment / Html / By /

отступы | htmlbook.ru



отступы | htmlbook.ru

Аня написала следующий код (пример 1) и получила страницу, показанную на рис. 1. Но Ане нужно, чтобы не было отступов между блоками, а также справа и слева от блоков. Какие изменения в код для этого требуется внести?

К абзацу (тег <p>) и заголовку (тег <h2>) автоматически добавляется верхний и нижний отступы, которые в сумме и дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо явно добавить свойство margin-bottom к селектору h2. Причем можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа.

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

Используйте стилевое свойство margin-top (отступ сверху) и margin-bottom (отступ снизу) для селектора UL или OL, в зависимости от типа списка. Также можно воспользоваться универсальным свойством margin.

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

При добавлении формы через тег <form> вокруг нее сверху и снизу автоматически добавляются отступы. Чтобы их убрать, используйте стилевое свойство margin с нулевым значением, добавляя его к селектору FORM.

При использовании тега <p> автоматически добавляются отступы сверху и снизу от текстового абзаца. Это сделано для того, чтобы визуально отделить один блок текста от следующего. Понятно, что значения отступов, которые заданы по умолчанию, устраивают не всегда, поэтому иногда их приходится уменьшать или увеличивать. Для этого можно использовать универсальное свойство margin, оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom — для отступа снизу.

О сайте

Помощь

Копирование материалов

Борьба с ошибками

Технологии

Поисковый плагин

Основные разделы

Статьи

Блог

Практикум

Цифровые книги

Форум

HTML

Самоучитель HTML

XHTML

Справочник по HTML

HTML5

CSS

Самоучитель CSS

Справочник по CSS

Рецепты CSS

CSS3

Сайт

Вёрстка

Макеты

Веб-сервер

htmlbook.ru использует Друпал хостинг it-patrol

© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]

Подпишитесь на материалы сайта по RSS

СSS Отступы

Этот элемент имеет отступы внутри со всех сторон 70 пикселей padding: 70px .


Редактор кода »

CSS отступы внутри

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

С помощью CSS у вас есть полный контроль над отступами. Есть свойства для установки отступа для каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

Отступы — все стороны

CSS имеет свойства для указания заполнения для каждого сторона элемента:

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

Все свойства padding могут иметь следующие значения:

  • размер — задает отступ в px, pt, cm, и т.д.
  • % — устанавливает отступы в процентах от ширины содержащего элемента
  • inherit — задает, что отступ должен быть унаследован от родительского элемента

Внимание: Отрицательные значения не допускаются.

В следующем примере задаются различные отступы для всех четырех сторон элемента <div>

Пример

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Редактор кода »

Отступ — сокращенное свойство

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

Свойство padding является сокращенным свойством для следующих свойств отступа:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Итак, вот как это работает:

Если, свойство padding имеет четыре значения:

  • padding: 25px 50px 75px 100px;
    • Отступ сверху 25px
    • Отступ справа 50px
    • Отступ снизу 75px
    • Отступ слева 100px

Если, свойство padding имеет три значения:

  • padding: 25px 50px 75px;
    • Отступ сверху 25px
    • Отступы справа и слева 50px
    • Отступ снизу 75px

Если, свойство padding имеет два значения:

  • padding: 25px 50px;
    • Отступы сверху и снизу 25px
    • Отступы справа и слева 50px

Если, свойство padding имеет одно значение:

  • padding: 25px;
    • Все отступы 25px

Отступ и ширина

CSS свойство width определяет ширину области содержимого элемента. Область содержимого, это часть находится внутри элементов

padding, border и margin (Бокс Модель).

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

В следующем примере элементу <div> присваивается ширина 300px. Однако фактическая отображаемая ширина элемента <div> будет равна 350px (300px + 25px левого отступа + 25px правой отступа):

Для того чтобы ширина была 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Этот элемент заставляет сохранять свою ширину; если вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот пример:

Еще примеры

Установить отступ слева
В этом примере показано, как задать отступ слева для элемента <p>

.

Установить отступ справа
В этом примере показано, как задать отступ справа для элемента <p>.

Установить отступ сверху
В этом примере показано, как задать отступ сверху для элемента <p>.

Установить отступ снизу
В этом примере показано, как задать отступ снизу для элемента <p>.

Проверьте себя с помощью упражнений!

Все CSS свойства отступов

СвойствоОписание
paddingСокращенное свойство для установки всех свойств отступа в одном объявлении
padding-bottomУстанавливает нижний отступ элемента
padding-leftУстанавливает левый отступ элемента
padding-rightУстанавливает правый отступ элемента
padding-topУстанавливает верхний отступ элемента

margin-bottom | htmlbook.ru

Internet ExplorerChromeOpera SafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

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

Версии 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.

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

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

Последнее обновление: 21.04.2016

Свойство margin определяет отступ элемента от других элементов или границы внешнего контейнера. Существуют специальные свойства CSS для задания отступов для каждой стороны:

  • margin-top: отступ сверху

  • margin-bottom: отступ снизу

  • margin-left: отступ слева

  • margin-right: отступ справа

Например:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
			div{
				margin-top: 30px; /* отступ сверху */
				margin-left: 25px; /* отступ слева */
				margin-right: 20px; /* отступ справа */
				margin-bottom: 15px; /* отступ снизу */
				
				border: 3px solid red; /* граница */
			}
        </style>
    </head>
    <body>
		<div>
			<p>Первый блок</p>
		</div>
		<div>
			<p>Второй блок</p>
		</div>
		<div>
			<p>Третий блок</p>
		</div>
    </body>
</html>

Можно вместо четырех свойств задать одно:


div{
	margin: 30px 20px 15px 25px;
	
	border: 3px solid red;
}

Свойство задается в формате:

margin: отступ_сверху отступ_справа отступ_снизу отступ_слева;

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


div{
	margin: 25px;
}

В этом случае для всех четырех отступов будет использоваться 25 пикселей.

Для установки отступов можно использовать точные значения в пикселях (px) или em, либо процентные отношения, либо значение auto (автоматическая установка отступов).

Например:


margin-left: 2em;

Значение 2 em определяет расстояние, которое в два раза больше размера шрифта элемента.

При использовании процентов веб-браузеры вычисляют размер отступов на основе ширины элемента-контейнера, в который заключен стилизуемый элемент.

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


div{
	margin-top: 30px; /* отступ сверху */
	margin-left: 25px; /* отступ слева */
	margin-right: 20px; /* отступ справа */
	margin-bottom: 15px; /* отступ снизу */
}

Между первым и вторым блоками расстояние будет равно 30 пикселям — значение свойства margin-top второго блока div, несмотря на то, что у первого блока div имеется свойство margin-bottom, равное 15 пикселям.

Поля и отступы (HTML + CSS)

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

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

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

Поля задаются стилем padding. Этот стиль применим только к элементам-контейнерам, которые могут содержать в себе другие элементы. Стиль позволяет задать значение полей между краями элемента и его содержимым. Стиль margin позволяет задать отступы от элемента до ближайших границ другого элемента. Границами другого элемента могут быть границы родительского контейнера, а также края самой страницы.

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

padding: 3px;
margin: 3px;

В этом случае поля и отступы будут со всех четырех сторон одинаковы. При задании двух аргументов через пробел:

padding: 3px 5px;
margin: 3px 5px;

первый будет определять величину полей/отступов сверху и снизу, второй — слева и справа. При задании трех аргументов:

padding: 3px 5px 2px;
margin: 3px 5px 2px;

первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

padding: 3px 5px 2px 6px;
margin: 3px 5px 2px 6px;

первый — поле/отступ сверху, второй — справа, третий — снизу, четвертый — слева. Легко запомнить: первый — сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, margin-left. Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

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

padding: 5px;

В результате страница изменит вид к следующему:

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

margin-top: 5px;

Заметьте, что отступ мы задаем именно таблице, а не ячейке таблицы, как в случае с полями. Вот результат:

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

HTML-код подопытной страницы:

<html>
  <head>
    <title>Тест</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  <body>
    <style>
      table {width: 200px;  height: 150px; border: 1px solid #555; border-collapse: collapse}
      td {vertical-align: top; padding: 0px}
      div {width: 100px;  height: 100px; background: red}
    </style>
    <table>
      <tr>
        <td>
          <div>&nbsp;</div>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Уменьшить расстояние между заголовком и идущим за ним текстом.

Решение

К абзацу (тег <p>) и заголовку (тег <h2>) автоматически добавляется верхний и нижний отступы, которые в сумме дают большое расстояние между заголовком и текстом. Чтобы уменьшить величину отступа надо добавить свойство margin-bottom к селектору h2. Причём можно установить положительное, нулевое или отрицательное значение. Таким способом легко задавать желаемое значение отступа (пример 1).

Пример 1. Использование отрицательных отступов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Расстояние между строками</title>
  <style>
   h2 {
    margin-bottom: -15px; /* Отрицательный отступ между заголовком и текстом */
   }
  </style>
 </head>
 <body>
   <h2>Апплет</h2>
   <p>Программа, которая выполняется с составе браузера или под управлением 
   специальной программы для её просмотра. Апплет, как правило, пишется на
   языке Java, поэтому часто можно встретить сочетание &laquo;Java 
   апплет&raquo;.</p>
 </body>
</html>

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

Рис. 1. Расстояние между заголовком и основным текстом

В данном примере для селектора h2 устанавливается отрицательное значение нижнего отступа, за счёт этого на 15 пикселов уменьшается расстояние между заголовком и нижележащим абзацем.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *