Непонятное поле

[aqua.77]

Откуда возникает нижний отступ в элементе ul? Я выделил его границей чтобы было понятно. Появляется именно после добавления свойства 
    overflow:hidden;

<ul>
<li><a href="#">123<div class="qc"></div></a></li>
</ul>

ul{
border:1px black solid;
}
ul li{
	display:inline;
}
ul a{
	display:inline-block;
	width:100px;
	position:relative;
	overflow:hidden;
}
.qc{
	position:absolute;
	top:0;
	left:0;
	width:300px;
	height:100%;
	background:red;
}

 

Edited November 7, 2016 by aqua.77

[Livitan]

3 часа назад, aqua.77 сказал:

Откуда возникает нижний отступ в элементе ul?

Вы указали для ul a display:inline-block , это значит что он ведет себя сначала как строка, а потом как блок, а строки не имеют свойства занимать всю высоту по умолчанию, если изменить в свойстве display , значение  на block .

То все получится.

[aqua.77]

11 час назад, Livitan сказал:

строки не имеют свойства занимать всю высоту

Получается что .qc занял всю высоту ul? Так как не нашел высоту ul a

[wwt]

10 часов назад, Livitan сказал:

Вы указали для ul a display:inline-block , это значит что он ведет себя сначала как строка, а потом как блок, а строки не имеют свойства занимать всю высоту по умолчанию, если изменить в свойстве display , значение  на block .

1. inline-block не ведет себя так как вы описали. Он снаружи inline, а внутри block

2. Блоки тоже не занимают всю высоту по умолчанию.

 

А в данном случае проблема скорее всего из-за межстрочного интервала. Более наглядно https://jsfiddle.net/m7de78cz/

[aqua.77]

1 час назад, wwt сказал:

проблема скорее всего из-за межстрочного интервала.

Нужно убрать интервал у li ?

ul{
border:1px black solid;
height:20px;
}
ul li{
	display:inline;
  background-color: green;
  line-height:0px;
}
ul a{
	display:inline-block;
	width:200px;
  height:100%;
	position:relative;
	overflow:hidden;
}
.qc{
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100%;
	background:red;
}

 

Ах да и ещё сделать li строчно-блочным чтобы высоту задавать

[Sensei]

Строки по-умолчанию выравниваются по базовой линии. Соответственно, снизу образуется пространство под нижние выносные элементы символов.

Задайте ссылкам vertical-align: top;

[aqua.77]

2 часа назад, Sensei сказал:

Строки по-умолчанию выравниваются по базовой линии. Соответственно, снизу образуется пространство под нижние выносные элементы символов.

Задайте ссылкам vertical-align: top;

Не понимаю почему в данном случае li занимает всю высоту а ссылка нет. Хотя оба элемента блочно-строчные и занимают 100% высоты

ul{
border:1px black solid;
}
ul li{
	display:inline-block;
	vertical-align:top;
}
ul a{
	display:inline-block;
	width:100px;
	height:100%;
	position:relative;
	overflow:hidden;
}
.qc{
	position:absolute;
	top:0;
	left:0;
	width:300px;
	height:100%;
	background:red;
	opacity:.5;
}

 

Edited November 8, 2016 by aqua.77

[Q4Dizzy]

5 часов назад, aqua.77 сказал:

Задайте ссылкам vertical-align: top;

Вы задали vertical-align: top; не ссылкам.

[aqua.77]

4 часа назад, Q4Dizzy сказал:

Вы задали vertical-align: top; не ссылкам.

Всё получилось! Но почему данная проблема вытекает только после применения overflow:hidden; ?

[Sensei]

У inline-block базовая линия проходит через последнюю строку внутри него.

Но когда вы задаете overflow отличное от visible, базовая линия отсчитывается от нижней границы самого блока.

Поэтому и появляется отступ.

[aqua.77]

1 час назад, Sensei сказал:

У inline-block базовая линия проходит через последнюю строку внутри него.

Но когда вы задаете overflow отличное от visible, базовая линия отсчитывается от нижней границы самого блока.

Поэтому и появляется отступ.

Всё всё дошло) только отзовитесь чтоб утвердиться. Свойство overflow:hidden; включает в себя базовую линию. Оно провоцирует контейнер расширяться и вмещать обтекаемые элементы и базовую линию.

[Sensei]

Вроде того, если я вас правильно понял.

Вообще, overflow: hidden скрывает переполнение, а остальное, скорее, побочные эффекты)

[aqua.77]

1 час назад, Sensei сказал:

Вроде того, если я вас правильно понял.

Вообще, overflow: hidden скрывает переполнение, а остальное, скорее, побочные эффекты)

Вот поэтому я и использую overflow: hidden чтобы скрыть часть контента. Но помимо скрытия overflow: hidden выводит на показ базовую линию блока. Как избавиться от этой линии?

<ul>
<li><a href="#">123<div class="qc"></div></a></li>
</ul>

ul{
border:1px black solid;
}
ul li{
	display:inline;
}
ul a{
	display:inline-block;
	width:100px;
	position:relative;
	overflow:hidden;
	border:1px black solid;
}
.qc{
	position:absolute;
	top:0;
	left:0;
	width:300px;
	height:100%;
	background:red;
}

 

[Sensei]

Я же вам написал выше как починить, и у вас даже все получилось)

ul a {
    vertical-align: top;
}

 

[aqua.77]

1 час назад, Sensei сказал:

Я же вам написал выше как починить, и у вас даже все получилось)

ul a {
    vertical-align: top;
}

 

Ок спасибо! можете подсказать хорошую статью про работу базовой линии.

[Launder]

16 часов назад, aqua.77 сказал:

Ок спасибо! можете подсказать хорошую статью про работу базовой линии.

Вот первая статья из цикла.