Как понять работу padding?

Question

[vasIvas]

Начав в свободное время вникать в css я сразу же столкнулся с проблемой, которую не понимаю.
padding - их хелпа и картинок я понял что это всего лишь отступ, но на деле оказалось что не просто. Чтобы Вы поняли о чем я говорю, я сделал пример на codepen. Вот пример , который показывает, как под-меню (то которое имеет начальное название звездочки) отодвигает главное меню (третий пункт основного меню, которое начинается с плюсиков). Тут вроде все понятно, у каждого пункта стоит padding 15px + размер самого текста, так и формируется размер одного сегмента меню. Все вроде бы вписывается в то что написано в интернете.
Но вот вот как сделать тоже самое без padding задав ширину и высоту?
Когда я задаю ширину 200px и высоту 50px, то поведение вообще не такое (я не беру во внимание сдвиг текст мне это не важно). Порядок пунктов меню сбивается. Почему? Почему padding это не просто отступ?

Comments

[Ярослав IKARUS]

а можете сказать что вообще сверстать то надо? а то как то не понятно что именно вы пытаетесь понять)

Answer 1

[Ярослав IKARUS]

Не особо вникал в эту верстку, но скажу лишь что если бы стоял box-sizing: border-box ваша жизнь была бы на много легче

Comments

[vasIvas]

где он должен стоять?

[Ярослав IKARUS]

vasIvas: я обычно для * (звездочка) ставлю его. Почитайте что он делает, очень удобная штука. Все паддинги начинают работать более логично и понятно. То есть если обычно паддинг ДОБАВЛЯЕТ снаружи пиксели то с этой штукой он наоборот изнутри добавляет... ну я думаю вы разберетесь

Answer 2

[demian4]

Если верно понял проблему, то у вас для .dropdown-nav задан left: -15px, который и сдвигает внутренний ul влево, отменяя действие padding. Пример без него codepen.io/anon/pen/Zbjpzq

Comments

[vasIvas]

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

[demian4]

по высоте можно добить выравниванием текста по середине, задав line-height такой как и желаемой высоты, в вашем случае это 50px, что касается с шириной, тут только padding. если нужен только отступ слева у текста то можно использовать padding-left.