Откуда берется padding в inline-block?

Question

[Capablanca]

Всем привет

Давайте посмотрим на обычный fiddle https://fiddle.jshell.net/CapablancaYEAH/n05ybmo3/
По сути это резиновый блок, неважно inline-block или block
Вопросы:
1) откуда берется 'padding' сверху и снизу?
2) Как его убрать? Например через reset.css это можно сделать?
3) Если его никак не убрать, то каким способом я могу узнать размеры этих паддингов?
Например, я собирался добавить padding после этого блока, а так как он уже имеет паддинг, то мне нужно вычесть из него уже имеющуюся величину, как ее узнать?
4) Возможно я дико ошибься и резиновые блоки для текста вообще задаются как-то по-другому? Если что, подскажите.

Answer 1

[iBird Rose]

где ты padding увидел? там magrin который от h1 идет

а если ты про второй блок которому ты задал hegiht: 20px, а он 22 - то это border.

Comments

[Александр Лысенко]

И вылечит это border-box

[Capablanca]

Да, значит это Margin. Ну в любом случае я про него и говорю.
Спасибо!

Сейчас пробую normalize.css, я думал оно уберет подобные паддинги.
Значит reset.css тоже не уберет и остается только border-box ?

[iBird Rose]

Capablanca: border-box решение для border'а
Margin у h1 уберет reset.css

[Александр Лысенко]

Capablanca: border-box это о другом. Если у вас блок 20 пикселей и есть бордер, то минимальная высота блока будет 22 пикселя (20 height + 1px border-top + 1px border-bottom). Свойство box-sizing: border-box; Сложит значение высоты и толщины рамки и вы получите 18 + 1 + 1. Т.е. не ваша проблема, но для общего развития сгодится )

[Capablanca]

AlexanderZe: ааа.. понял вас!
Простите, пожалуйста, а может есть какая-то статья от мастера верстки, в стиле "Подготовка к верстке", чтобы там описывались какие-то базовые штуки, по типу этого.
Чтобы настроить для себя некий template, с которого я смогу начинать каждый проект и в процессе уже не парится по поводу неправильных размеров и прочее?

[Александр Лысенко]

Capablanca: Боюсь, что это не совсем правильный подход. Тот же сброс стилей уже не раз осуждался специалистами Яндекс, как опасная для развития проекта штука. Хотя, конечно, удобно. В целом, если говорить о голой верстке то кроме reset и normalize вам ничего не понадобиться. Все остальное либо используется с нуля, либо пишется под себя. Следующий шаг это препроцессоры css кода и сразу же за ними, а можно и вместе, фреймворки.

Зайдите на хабр или поищите тут в поиске. Тема избита.

[Capablanca]

iBird Rose: Понял вас! Позвольте еще вопрос
https://i.yapx.ru/JkRV.jpg
Reset.css делает все намного лучше, но все-равно остаются маргины, я так понимаю это максимум.
Но как же тогда вся эта хваленая pixel-perfect верстка, если вот такие вот вещи никуда не деваются?

[iBird Rose]

Capablanca: если вам они не нужны, что вам мешает прописать
h1 {margin: 0;}

[Александр Лысенко]

Capablanca: Да обнулите вы их вручную:

h1, h2, h3, h4, h5, h6 {
margin: 0;
}

[Capablanca]

iBird Rose: AlexanderZe: на скриншоте уже все после обнуления, это максимум

[iBird Rose]

Capablanca: значит это line-height

Answer 2

[Александр Лысенко]

В вашем случае не padding, а margin. И это естественное свойство для H1-Hx. Reset должен обнулить

Comments

[Capablanca]

Спасибо!

Reset.css ?
оки, я просто решил поработать с normilize.css и оно походу не убрало эту вещь)

[Александр Лысенко]

Capablanca: normilize.css более чем сгодиться. Хоть вручную обнуляйте margin. Я просто использовал тот же термин что и вы чтобы не мудрить )

[Ярослав Иванов]

Capablanca: front-end.conf.work

[Capablanca]

AlexanderZe: Спасибо! Ну вот как раз normilize не убрал, я впринципе читал документацию к нему, он не аналог reset.css , тут другой принцип, но не ожидал такого, думал там и это учтено...