Question

当我将图像插入<aside>元素时，现在它会推动＆＃34; <section>元素在屏幕上大约下降50％，这会在屏幕上留下50％的空白，我完全不知道是什么导致它，开发控制台没有选择任何错误，但是在我所有的浏览器：Firefox，Chrome，Edge，都用这个空白显示它。

以下是该问题的屏幕截图：

Whitespace 。

这是一个片段：

＆＃13;

* {
    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; 
}

＆＃13;

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

＆＃13;

Answer 1

在vertical-align: top;代码中添加section。

解释： 您的块的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>

	<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>

CSS - 导致空白的原因

1 个答案: