Padding сверху и снизу для строчных элементов

@sergei2210 · Регистрация: 07.04.2016

Студворк — интернет-сервис помощи студентам

Вопрос зачем padding сверху и снизу для строчных элементов. Кроме наезжающих полей на соседний элемент, зачем он?

@Fedor92 · 16.10.2016, 11:57

Сообщение от sergei2210

Вопрос зачем padding сверху и снизу для строчных элементов. Кроме наезжающих полей на соседний элемент, зачем он?

Только для того, чтобы текст не слипался...

Пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{box-sizing:border-box; padding: 0; margin: 0; line-height:0}
    </style>
</head>
<body>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, vel, esse, sapiente, explicabo debitis eaque voluptas reiciendis incidunt natus quisquam distinctio necessitatibus. Fugiat, non temporibus maiores eaque in vitae tempora.</span>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae dolore aut voluptate soluta libero culpa vitae. Fuga, quo, autem, cupiditate officia eligendi animi beatae id debitis mollitia non excepturi!</span>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, quam, doloremque totam provident eaque molestiae eius dignissimos ullam reprehenderit! Repudiandae, numquam rem cumque ea fugiat deleniti nemo quis nihil iusto!</span>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, fuga, in, sunt, doloribus facilis architecto repellendus eum placeat delectus cumque quam minima debitis non sint iure quo distinctio. Atque, enim.</span>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, temporibus alias officiis vitae odit aliquam maiores magnam ab sunt quos perspiciatis perferendis reprehenderit atque numquam aut asperiores rerum odio quia?</span>
</body>
</html>

@sergei2210 · 16.10.2016, 12:23 **[ТС]**

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

@Fedor92 · 16.10.2016, 12:28

sergei2210, что спросили на то и ответил...

@mrtoxas · 16.10.2016, 12:38

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

@Fedor92 · 16.10.2016, 12:45

mrtoxas, а при какой кухне тут схлопывающиеся отступы, если речь об инлайновых элементах?

Сообщение от sergei2210

если задать фон то фон на едет друг на друга при условии двух строк

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

@sergei2210 · 16.10.2016, 13:38 **[ТС]**

Сообщение от mrtoxas

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

Я читал это и схлопающие отступы это про маржины а не про падинги

@mrtoxas · 16.10.2016, 13:41

Не по теме:

да это у меня невнимательное утро

@sergei2210 · 16.10.2016, 13:43 **[ТС]**

HTML5
1
2
<span class="sample">какой то текст</span><br>
<span class="sample">еще текст вот </span>

CSS
1
2
3
4
.sample{
    background-color:red;
    padding:20px;
}

вот фон наехал на другой

@Fedor92 · 16.10.2016, 14:06

Сообщение от sergei2210

вот фон наехал на другой

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

Не по теме:

Сообщение от mrtoxas

да это у меня невнимательное утро

Бывает...

@sergei2210 · 16.10.2016, 14:09 **[ТС]**

Сообщение от Fedor92

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

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

@Fedor92 · 16.10.2016, 14:12

sergei2210, если хотите получить более подробную информацию, обратитесь в w3c-консорциум... Люди, которые присутствуют на форуме не принимали участия в разработке спецификаций... Если ответ:

Сообщение от Fedor92

Только для того, чтобы текст не слипался...

Вас не устраивает, обратитесь к первоисточнику, потом нам расскажете, если узнаете, что-то новое...

@sergei2210 · 16.10.2016, 14:23 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277

	Padding сверху и снизу для строчных элементов 16.10.2016, 04:29. Показов 2729. Ответов 12 Метки нет (Все метки) Вопрос зачем padding сверху и снизу для строчных элементов. Кроме наезжающих полей на соседний элемент, зачем он? 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	16.10.2016, 12:23 [ТС]
	Вы сейчас искусственно создали что бы он слипся, а по умолчанию он не будет слипаться. А вопрос в том что зачем делать падинг сверзу и снизу если он сам текст не переместит но если задать фон то фон на едет друг на друга при условии двух строк 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	16.10.2016, 12:28
	sergei2210, что спросили на то и ответил... 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.10.2016, 12:38
	У наезжающих полей есть определение - схлопывающиеся отступы. Почитайте, в статье объясняется зачем это все нужно. 0

@mrtoxas
	16.10.2016, 13:41
	Не по теме: да это у меня невнимательное утро 0

@sergei2210 2 / 2 / 0 Регистрация: 07.04.2016 Сообщений: 277
	16.10.2016, 14:23 [ТС]
	Англиканским к сожалению не знаю а в пытливый ум наших разработчиков верю. По этому и спрашиваю. И да мне не досточно делай так получишь такой результат, мне нужно понимат ьпочему те или иные действия приводят к тому или иному результату. 0