Вертикальное пространство между двумя инлайн-блок и блок элемента

.rectangle { 
 
    width: 420px; 
 
    height: 143px; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 20px 0px 20px 10px; 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 92px solid transparent; 
 
    border-bottom: 92px solid transparent; 
 
    border-left:45px solid rgba(0, 0, 0, 0.7); 
 
    display: inline-block; 
 
} 
 

 
.block { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: red; 
 
}

<div class="rectangle"></div><!-- 
 
--><div class="triangle"></div> 
 
<div class="block"></div>

Откуда это взялось? Как избавиться от него без отрицательных полей (потому что на некоторых экранах они могут перекрываться).

источник

2016-07-22 kulan

это из-за несоответствия между высотой. Rectangle и шириной границы. Triangle .. вы можете настроить его, чтобы удалить пространство между divs –

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

Другие ответы обеспечивают решения, но не почему это происходит:

Some given funny joke 
-----^---------^-^

В этой строке я отметил три символа. Эти три имеют так называемый «decenders» (например: петля под G, ноги под Y и J).
Когда вы заявляете что-то inline-block, он получает свойства как block, так и inline элементов.Внутренние элементы часто являются текстовыми (, например a или span), таким образом, есть правообладатели, таким образом, ваш div имеет место для детектора.

Это почему установка line-height:0; font-size:0; делает трюк.

источник

2016-07-22 10:04:43 Martijn

его из line-height, также, ваш .rectangle пропускал 1px в высоту (143-> 144)

Примечание: я не уверен, если это кросс-браузер, поэтому рекомендуется использовать float: left вместо

.rectangle { 
 
    width: 420px; 
 
    height: 144px; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 20px 0px 20px 10px; 
 
    position: relative; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 92px solid transparent; 
 
    border-bottom: 92px solid transparent; 
 
    border-left:45px solid rgba(0, 0, 0, 0.7); 
 
    display: inline-block; 
 
} 
 

 
.block { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: red; 
 
} 
 
.wrapper{ 
 
    line-height: 0; 
 
}

<div class="wrapper"><div class="rectangle"></div><!-- 
 
--><div class="triangle"></div><!-- 
 
--><div class="block"></div></div>

источник

2016-07-22 07:01:43

есть много решений этой

Решение 0: Нет Расстояние между элементами

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

Решение 1: Размер шрифта: 0 на Родитель

.inline-block-list { /* ul or ol with this class */ 
    font-size: 0; 
} 

.inline-block-list li { 
    font-size: 14px; /* put the font-size back */ 
}

Решение 2: HTML Комментарии

<ul> 
    <li>Item content</li><!-- 
--><li>Item content</li><!-- 
--><li>Item content</li> 
</ul>

Решение 3: Отрицательное M Argin

.inline-block-list li { 
    margin-left: -4px; 
}

Решение 4: Падение закрытия Угол

<ul> 
    <li>Item content</li 
><li>Item content</li 
><li>Item content</li> 
</ul>

more about this

источник

2016-07-22 07:03:59

Получил мой голос за множество решений. – lozzajp

Только решение 1 - это хорошо. Решение 3 плохо, потому что вы не должны исправлять проблему текста с жестким кодом, как только размер шрифта увеличивается, это будет неправильно. Или, если шрифт отображается другим (например, различные браузеры). – Martijn

И, пожалуйста, не используйте 4, это очень похвально. Я пропустил то, что происходило, я бы «исправил» его, нарушив его. – Martijn

Вы можете использовать CSS псевдо-элемент :after в этом случае.

Проверьте ниже пример:

.rectangle { 
 
    width: 420px; 
 
    height: 143px; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 20px 0px 20px 10px; 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 
.rectangle:after { 
 
    top: 0; 
 
    left: 100%; 
 
    content: ""; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 92px solid transparent; 
 
    border-bottom: 92px solid transparent; 
 
    border-left: 45px solid rgba(0, 0, 0, 0.7); 
 
} 
 
.block { 
 
    width: 200px; 
 
    height: 80px; 
 
    background: red; 
 
}

<div class="rectangle"></div> 
 
<div class="block"></div>

источник

2016-07-22 07:04:55 Pugazh

использование font-size:0 для родительского элемента

источник

2016-07-22 07:06:09

Вертикальное пространство между двумя инлайн-блок и блок элемента

ответ

Смежные вопросы