Почему возникает отступ между блоками?

Question

[sinevik]

Суть вопроса в следующем
Вот тут есть отступ между двумя блоками


Как только я высоту блока делаю на 10 px больше отступ исчезает


Почему?

Comments

[Ankhena]

1. hr - одиночный тег, у него нет парного закрывающего (на проблему это никак не влияет)
2. #navigation инлайн-блочный - задавайте просто блочным при перестроении или задавайте родителю шрифт равный 0 и потомкам возвращайте или используйте флексы.

Answer 1

[shadobut]

Ширину для таких блоков не стоит задавать вообще.
Для инлай-блоков нужно указывать родителю font-size: 0;

Comments

[sinevik]

И в итоге вот c font size

[shadobut]

Родительскому блоку задал?
Можешь залить код на codepen?

[sinevik]

Да секунду

[sinevik]

shadobut, https://jsfiddle.net/s83cy89n/

[shadobut]

sinevik,
#navigation {
font-size: 0;
line-height: 30px;
}
#menu>a {
font-size: 16px;
}

[sinevik]

Да заработало.
Только теперь понять, почему вместо line-height: 40px мы ставим 30, и откуда вообще font-size: 16px; ?? число 16? и зачем font-size: 0;

[shadobut]

sinevik, верстка очень плохая. Я не разбирался особо. Прикинул, что font-size для размера меню 16, а line-height для #navigation и вовсе не нужно было задавать

[sinevik]

Это первая моя вертска. А что не так?

[shadobut]

1. Использование id вместо классов
2. Шрифты лучше использовать из google fonts(open sans там есть)
3. Куча лишнего кода в стилях
4. Каскад
p.s. Главное не останавливайтесь. Учитесь, тренируйтесь дальше и смотрите, как верстают другие

[sinevik]

1. Использование id вместо классов
А почему это так принципиально?
Нам на курсах говорили что у каждого элемента должен быть ID. И это удобно, сразу видишь где какой элемент? И что имеется ввиду под каскадом?

[shadobut]

У id бОльший приоритет и его сложно перебить.
Id нельзя переиспользовать(вообще можно, но там свои проблемы) и нельзя задать одному тегу несколько id.
Каскад: #navbar>#menu>a - каскад (плохо). Его сложно перебить и невозможно будет использовать отдельно меню от #navbar.
Можно использовать бэм с минимальным каскадом:
.navbar {}
.navbar__menu {}
.menu {}
.menu__link {} либо .menu a {}

[sinevik]

Может быть. Просто когда я делаю классы, мне становится все гораздо не понятней. Кучу разного рода классов. Ничего не понять. А каскад сразу какую та структура задает, видно что где
И что переделывать все в классы? Вместо каскада отдельный класс делать? Там же потом ногу сломишь?

[shadobut]

sinevik,

Просто когда я делаю классы, мне становится все гораздо не понятней.

Если для себя - делайте, как удобно Вам.
Если для других, то помните, что Ваш код будут поддерживать и дорабатывать в будущем.

[sinevik]

Ок переделаю в классы. Но я просто не понимаю, я основы JS изучал, и там есть такая штука document.getElementBiId()
По id выбирает. И я не совсем если честно понимаю почему это плохо для изменения. Выбрал элемент какой тебе надо, и вешай на него обработчики, меняй стили

Answer 2

[tyzberd]

https://jsfiddle.net/s83cy89n/1/

Comments

[sinevik]

Не могу найти что вы изменили?