首页 \ 问答 \ CSS - 导致空白的原因(CSS - What is causing the Whitespace)

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>
 
 
 

 


When I insert an image into the <aside> element, it now "pushes" the <section> element roughly 50% down on the screen, this leaves 50% of whitespace on the screen, I have absolutely no idea what is causing it, the Dev console doesn't pick any errors up, Yet on all my browsers: Firefox, Chrome, Edge, all display it with this whitespace. 
 

Here is a screenshot of the issue: 
 

Whitespace. 
 

And here is a snippet:
 

 

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

 


原文：https://stackoverflow.com/questions/39897303
更新时间：2023-06-26 07:06

最满意答案

 当然VA是作为可视工作室附加组件实现的，我想这可以访问某种视觉工作室API，我想这会暴露代码编辑器内容等内容。 
 

 有关详细信息，请参阅此链接： http ： //www.microsoft.com/downloads/details.aspx？ FamilyId = 59EC6EC3-4273-48A3- BA25-DC925A45584D＆ displaylang = en 
 

 心连心 

surely VA is implemented as a visual studio add-on, which i guess would have access to some sort of visual studio API which i suppose would expose stuff like code editor content etc.
 

see this link for more info: http://www.microsoft.com/downloads/details.aspx?FamilyId=59EC6EC3-4273-48A3-BA25-DC925A45584D&displaylang=en
 

hth

相关问答

更多

相关文章

更多
  • CSS样式
  • 编写统一、符合习惯的CSS的原则
  • css常用属性
  • 在html使用CSS的方式
  • css选择器使用
  • css盒子模型
  • 求教一个 table的css
  • 孔浩css视频教程
  • 《DIV.CSS应用视频教程》(DIV+CSS)[压缩包]
  • CSS基础视频教程-尚学堂视频教程

    • 最新问答

    更多
  • 您如何使用git diff文件，并将其应用于同一存储库的副本的本地分支？(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收？(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get（）从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序：页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结？(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow：基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误：RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C＃类名中允许哪些字符？(What characters are allowed in C# class name?)
  • NumPy：将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全？(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet？(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href，而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用：悬停在悬停时：在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)

    • Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号

    本站部分内容来源于互联网，仅供学习和参考使用，请莫用于商业用途。如有侵犯你的版权，请联系我们(neng862121861#163.com)，本站将尽快处理。谢谢合作！