@vasIvas

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

Начав в свободное время вникать в css я сразу же столкнулся с проблемой, которую не понимаю.
padding - их хелпа и картинок я понял что это всего лишь отступ, но на деле оказалось что не просто. Чтобы Вы поняли о чем я говорю, я сделал пример на codepen. Вот пример , который показывает, как под-меню (то которое имеет начальное название звездочки) отодвигает главное меню (третий пункт основного меню, которое начинается с плюсиков). Тут вроде все понятно, у каждого пункта стоит padding 15px + размер самого текста, так и формируется размер одного сегмента меню. Все вроде бы вписывается в то что написано в интернете.
Но вот вот как сделать тоже самое без padding задав ширину и высоту?
Когда я задаю ширину 200px и высоту 50px, то поведение вообще не такое (я не беру во внимание сдвиг текст мне это не важно). Порядок пунктов меню сбивается. Почему? Почему padding это не просто отступ?
  • Вопрос задан
  • 193 просмотра
Решения вопроса 2
yar-ikarus
@yar-ikarus
Аномалия
Не особо вникал в эту верстку, но скажу лишь что если бы стоял box-sizing: border-box ваша жизнь была бы на много легче
Ответ написан
@demian4
Если верно понял проблему, то у вас для .dropdown-nav задан left: -15px, который и сдвигает внутренний ul влево, отменяя действие padding. Пример без него codepen.io/anon/pen/Zbjpzq
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы