В чем моя ошибка не как не могу понять где я поставил отступ и как ее убрать?

Question

[Alex ALex]

Если задаю в боди font-size: 1px; то все норм пропадает отступ а причем тут это не как не понял помогите и если где то еще есть ошибка подскажите пожалуйста)
Я все исправил все ок только при уменьшении экрана можете посмотреть снизу в бургере отступ.
https://codepen.io/P-RO-ME-TEY/pen/Kboorj

Comments

[Дмитрий Добрышин]

Хороша портянка, только не понятно что за отступ. где и как. может лучше здесь показать?

[crast]

Дмитрий Добрышин, тут нас уже несколько - ломающих головы над мыслью автора вопроса ))

[RAX7]

Скорее всего отступ между элементами с inline-block

[Alex ALex]

Дмитрий Добрышин, Вот тут пробую но не как не добавляется jquery(((
https://codepen.io/P-RO-ME-TEY/pen/Kboorj

[Alex ALex]

Дмитрий Добрышин, Я все исправил посмотрите пожалуйста в чем моя ошибка?

[Alex ALex]

RAX7, Я там проверил все норм ненашул посмотрите пожалуйста код

[Alex ALex]

crast, Извиняюсь навичек пока изучаю все((

[Сергей delphinpro]

Alex ALex, какой отступ-то? где? я не вижу никаких отступов.

[RAX7]

Alex ALex,

@media screen and (max-width: 560px) {
.menuToggle {
  display: block; /* <- !!! */
  padding: 8px 10px 8px 10px;
  background: green;
  width: 40px;  /* <- !!! */
}

[Alex ALex]

Сергей delphinpro, Уменьшите экран там медиа написал и посмотрите внизу кнопки есть отступ сейчас покажу картинку.

[Сергей delphinpro]

Дмитрий Добрышин,

Можете нарушив структуру написать все элементы меню <li>...</li><li>...</li> друг за другом слитно без пробелов.

Это неудобно. В этом случае лучше просто опустить закрывающий тег /li

[Alex ALex]

Дмитрий Добрышин, Я может не так как сейчас изначально вам объяснил но смотрите я даже скрин скинул какая там отступ и код тоже выложил не понимаю причем тут Li я же когда задаю font-size : 0 в боди все становится вот таким

[Alex ALex]

RAX7, Z Я уже там пробовал там все ок я убрал даже все норм там. Если хотите попробуйте я же выложил код.

Answer 1

[Сергей delphinpro]

Alex ALex,
Для общего понимания что происходит рекомендую книжку "Инлайновый контекст форматирования". Она бесплатная, распространяется в электронном виде на сайте css-live.ru

Для быстрого фикса проблемы задайте своим inline-block элементам правило vertical-align: top;

А вообще завязывайте и инлайн-блоками. Используйте флексы. Это не так страшно, как может показаться на первый взгляд.

Comments

[Alex ALex]

Для меню тоже использовать Flex?

[Rustam Bainazarov]

Alex ALex, а почему нет?

[Сергей delphinpro]

Alex ALex, да

.menu { display: flex; }
.menu a { display: block; }

Answer 2

[galkan]

Отступ, потому что, бургер здесь строчный элемент. Для его родителя можно line-height: 0; или тот-же font-size: 0;

Comments

[Alex ALex]

Изначально ссылка является строчным элементом по этому я сделал ее блочным что бы задать ширину и высоту menu-btn она же уже блочная не строчная.

Answer 3

[Максим]

Я вообще не парился и сделал кнопу блочной так как line-height и font-size не помогал : смотрите