Css 为什么这些元素是分开的？_Css

Css 为什么这些元素是分开的？

css

Css 为什么这些元素是分开的？,css,Css,我试图在不使用浮动的情况下实现此简单结构：我是网页设计新手，所以我有点迷路了。为什么绿色和红色元素之间有白色的间隔？这不是填充，也不是空白。。。我不明白。多谢各位这是HTML： <body> <header></header> <section></section> <aside></aside> <footer></footer> </body&

我试图在不使用浮动的情况下实现此简单结构：

我是网页设计新手，所以我有点迷路了。为什么绿色和红色元素之间有白色的间隔？这不是填充，也不是空白。。。我不明白。多谢各位

这是HTML：

<body>
    <header></header>
    <section></section>
    <aside></aside>
    <footer></footer>
</body>

这是因为您将它们声明为

display:inline block

，然后在代码中换了一行，导致出现空白。您可以通过以下方式进行修复：

<header></header>
<section></section><!--
--><aside></aside>
<footer></footer>



另外，我看不出使用显示的原因：内联块
和浮动
在一起
空间是由于元素是内联的，内联元素对空白敏感。只需删除代码中的空格，间隙就会消失
<header></header>
<section></section><aside></aside>
<footer></footer>


您必须在部分float:left上使用，并在旁边放置宽度：30%：
section {
  position: relative;
  margin: 0;
  padding: 0;
  width: 70%;
  height: 600px;
  box-sizing: border-box;
  background-color: red;
  display: inline-block;
  float: left;
}

aside {
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  width: 30%;
  height: 600px;
  box-sizing: border-box;
  background-color: green;
  display: inline-block;
}

观看演示：inline block将元素视为句子中的单词，因此它们之间的任何空白都将显示出来-注释掉空白，这样就不会有空白。还有2%的空间丢失（70%+28%），这是HTML结构中的空白。这是因为元素是根据CSS内联的。您可以尝试在正文中设置字体大小：0，然后在您的部分中重新调整。不，他不必使用浮动来消除间隙。您是对的……从空白中删除空格是更好的方法，但如果您自动格式化代码，它将再次发生。这只是一种强制方式。
<header></header>
<section></section><aside></aside>
<footer></footer>

section {
  position: relative;
  margin: 0;
  padding: 0;
  width: 70%;
  height: 600px;
  box-sizing: border-box;
  background-color: red;
  display: inline-block;
  float: left;
}

aside {
  position: relative;
  margin: 0;
  padding: 0;
  left: 0;
  width: 30%;
  height: 600px;
  box-sizing: border-box;
  background-color: green;
  display: inline-block;
}