CSS-导致空白的原因
[英]CSS - What is causing the Whitespace
问题描述
当我将图像插入<aside>元素时，它现在将<section>元素“推”到屏幕上大约50％的位置，这将50％的空白留在屏幕上，我完全不知道是什么原因引起的，开发者控制台没有发现任何错误，但是在我所有的浏览器上：Firefox，Chrome，Edge都使用此空格显示它。
这是问题的屏幕截图：
。
这是一个片段：
* { 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>
1 个解决方案
解决方案1
1 已采纳 2016-10-06 13:30:16
添加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>
Javascript + CSS animation 不工作，可能是什么原因造成的？
[英]Javascript + CSS animation not working, what could be causing it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.