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

[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]

  On 11/7/2016 at 4:16 PM, aqua.77 said:

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

Expand  

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

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

[aqua.77]

  On 11/7/2016 at 8:09 PM, Livitan said:

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

Expand  

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

[wwt]

  On 11/7/2016 at 8:09 PM, Livitan said:

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

Expand  

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

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

 

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

[aqua.77]

  On 11/8/2016 at 7:17 AM, wwt said:

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

Expand  

Нужно убрать интервал у 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]

  On 11/8/2016 at 7:50 AM, Sensei said:

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

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

Expand  

Не понимаю почему в данном случае 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]

  On 11/8/2016 at 9:00 AM, aqua.77 said:

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

Expand  

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

[aqua.77]

  On 11/8/2016 at 2:04 PM, Q4Dizzy said:

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

Expand  

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

[Sensei]

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

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

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

[aqua.77]

  On 11/8/2016 at 6:31 PM, Sensei said:

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

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

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

Expand  

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

[Sensei]

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

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

[aqua.77]

  On 11/8/2016 at 7:14 PM, Sensei said:

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

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

Expand  

Вот поэтому я и использую 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]

  On 11/8/2016 at 7:45 PM, Sensei said:

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

ul a {
    vertical-align: top;
}

 

Expand  

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

[Launder]

  On 11/8/2016 at 7:53 PM, aqua.77 said:

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

Expand  

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