Откуда у блоков отступы по высоте?

Question

[IvanIvanIvanIvanIvan]

Подскажите откуда у блоков отступы по высоте? Как это исправить? Без flexBOX

https://jsfiddle.net/xwt6nhvt/

Answer 1

[Sergiu Mitu]

Все из за display: inline-block;
добавьте font-size: 0 для родителя и отступа не будет

Answer 2

[Elwen]

Все дело в том, что у вас блокам назначен display: inline-block;. А все инлайновые блоки по умолчанию выравниваются по вертикали по baseline, у которой есть зазор снизу. Именно этот отступ вы и видите. Что бы его убрать, пропишите инлайн блокам vertical-align: top (или middle/bottom, что вам больше подойдет).

Comments

[IvanIvanIvanIvanIvan]

А вот тут при уменьшении экрана все равно отступы между блоками и не знаю что делать
https://jsfiddle.net/daft82m5/3/

[Elwen]

IvanIvanIvanIvanIvan, не совсем поняла о каких именно отступах идет речь.
Если об отступах у полосок до краев экрана, то это у body по умолчанию идет margin, его можно просто обнулитьbody {margin: 0}
Если речь об отступах между блоками по вертикали (отступ сверху больше), то у вас заданы фиксированные размеры высоты блоков и line-height.
Если же речь о <p> в ссылках, то у этого тега тоже еcть дефолтный margin в 1em сверху и снизу, который можно обнулить или задать необходимый.
p.s. Обратите внимание, что в свойстве font необходимо соблюдать определенную последовательность (перенесите указание шрифта в конец), иначе все свойство будет игнорироваться, как сейчас.

[IvanIvanIvanIvanIvan]

Отступы по вертикале, между блоками a
Вот как на рисунке
Между HOME и ABOUT US
Целых 2 часа ничего не могу сделать

[Elwen]

Основной отступ появляется из-за: #navigation { line-height: 80px; } В мобильных он должен быть по размеру блоков - 40px.
Вот вам в помощь пример с комментариями - https://jsfiddle.net/pf00hghj/2/

[IvanIvanIvanIvanIvan]

Elwen, О спасибо огромное

[IvanIvanIvanIvanIvan]

#menu > a {
		width:100%;
		height: 40px;
		line-height: 40px;
		margin: 0px;
		padding: 0px;
		text-align: center;
		border-bottom: 1px solid #8b8b8b;
	}

А почему тут уже не надо vertical-align:top?

[Elwen]

IvanIvanIvanIvanIvan, потому что стили вне @media будут применены всегда. Соответственно, указанные выше vertical-align и display: inline-block уже применены к этому блоку.

Answer 3

[dmitriyprog]

paddind:0
margin:0
border:none

Comments

[IvanIvanIvanIvanIvan]

Ну все равно не работает

[lukoie]

О, как раз недавно с таким столкнулся в одной менюшке.
Отступы надо устанавливать у блоков, и у включающих их блоков.
Если блок включен в другой блок, там получаются отступы по 2 пикселя.
Поставьте float: left у one two three