CSS - Что вызывает пробел

Когда я вставляю изображение в элемент <aside>, он теперь «толкает» элемент <section> примерно на 50% вниз на экране, это оставляет 50% пробелов на экране, у меня абсолютно нет идея, что вызывает его, консоль Dev не выдает никаких ошибок, но во всех моих браузерах: Firefox, Chrome, Edge все отображает это с помощью этого пробела.CSS - Что вызывает пробел

Вот скриншот выпуска:

Whitespace .

А вот фрагмент:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header, section, footer, aside, nav, article, hgroup { 
 
    display: inline-block; 
 
} 
 
html { 
 
    height: 100vh; 
 
} 
 
body { 
 
    font-family: 'Archivo Narrow', sans-serif; 
 
    margin: 0 auto;  
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
html, body { 
 
    overflow: hidden; 
 
} 
 

 
/* Main Content Page */ 
 

 
main { 
 
    width: 100%; 
 
    height: 100vh;  
 
} 
 
header { 
 
    width: 100%; 
 
    height: 18vh; 
 
    background-color: orange; 
 
} 
 
aside { 
 
    width: 20%; 
 
    height: 82vh; 
 
    background-color: orange; 
 
} 
 
.hello { 
 
    width: 70%; 
 
    height: 40vh; 
 
} 
 
section { 
 
    width: 80%; 
 
    height: 82vh; 
 
    background-color: darkgrey; 
 
    box-shadow: 5px 5px 5px inset; 
 
}

<body> 
 

 
    <main id="content"> 
 

 
     <header> 
 
     <h1>Just a random Header</h1> 
 
     </header> 
 

 
     <aside> 
 
     <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
     <img src="Images/Businessman/Hello.png" alt="Welcome" class="hello" /> 
 
     </aside><!-- 
 
     This comment is to help remove the whitespace between these elements :/ 
 
     --><section> 
 
     <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
     <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
     <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
     <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
     </section><!-- 
 
     This comment is to help remove the whitespace between these elements :/ 
 
    --></main> 
 

 
    <script src="script.js"></script> 
 
</body> 
 
</html>

источник

2016-10-06 Ricky

Я думаю, что это скорее вопрос позиционирования, чем пробельный вопрос. Я думаю, что вам нужно свойство 'align'. – Carcigenicate

Добавить vertical-align: top; в свой section тег.

Explaination: display свойства ваших блоков устанавливаются в inline-block, так что они будут использовать vertical-align свойство, которое по умолчанию для baseline. В вашем случае вы хотите, чтобы они выровнялись вверху, поэтому вы должны указать его.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header, section, footer, aside, nav, article, hgroup { 
 
    display: inline-block; 
 
} 
 
html { 
 
    height: 100vh; 
 
} 
 
body { 
 
    font-family: 'Archivo Narrow', sans-serif; 
 
    margin: 0 auto;  
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
html, body { 
 
    overflow: hidden; 
 
} 
 

 
/* Main Content Page */ 
 

 
main { 
 
    width: 100%; 
 
    height: 100vh;  
 
} 
 
header { 
 
    width: 100%; 
 
    height: 18vh; 
 
    background-color: orange; 
 
} 
 
aside { 
 
    width: 20%; 
 
    height: 82vh; 
 
    background-color: orange; 
 
} 
 
.hello { 
 
    width: 70%; 
 
    height: 40vh; 
 
} 
 
section { 
 
    width: 80%; 
 
    height: 82vh; 
 
    background-color: darkgrey; 
 
    box-shadow: 5px 5px 5px inset; 
 
    vertical-align: top; 
 
}

<body> 
 

 
\t <main id="content"> 
 

 
\t \t <header> 
 
\t \t \t <h1>Just a random Header</h1> 
 
\t \t </header> 
 

 
\t \t <aside> 
 
\t \t \t <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
\t \t \t <img src="Images/Businessman/Hello.png" alt="Welcome" class="hello" /> 
 
\t \t </aside><!-- 
 
\t \t \t This comment is to help remove the whitespace between these elements :/ 
 
\t \t --><section> 
 
\t \t \t <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
\t \t \t <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
\t \t \t <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
\t \t \t <p>Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text, Just alot of Random Text</p> 
 
\t \t </section><!-- 
 
\t \t \t This comment is to help remove the whitespace between these elements :/ 
 
\t --></main> 
 

 
\t <script src="script.js"></script> 
 
</body>

источник

2016-10-06 13:30:16 Cladiuss

Не могли бы вы объяснить, как это работает, мне никогда не приходилось использовать это раньше? – Ricky

Поскольку ваши блоки являются 'display: inline-block', они используют свойство' vertical-align'. По умолчанию «vertical-align: baseline». Поэтому, если вы хотите, чтобы эти блоки были вертикально выровнены вверху, вы должны указать его. – Cladiuss

Делает смысл. Если вы хотите добавить это в свой ответ, просто чтобы он помог другим, я согласен с ним, спасибо – Ricky

CSS - Что вызывает пробел

ответ

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