如何消除网页中content与sidebar两个元素间的空隙？

看了你的布局代码和遇到的空隙问题，核心原因是混合使用Bootstrap栅格系统与自定义浮动、宽度样式，再加上额外的内边距、外边距设置，导致布局冲突产生了不必要的空隙。下面是具体的修复方案：

问题拆解 #

1. 你给#content设置了width:80%和float:left，但内部又嵌套了Bootstrap的col-md-9——栅格系统本身已经处理了宽度和浮动逻辑，两者叠加就会打乱布局。
2. #content的padding-left:30px和#sidebar的margin-right:70px，额外拉大了两个区块之间的距离。
3. 重复使用id="post"不符合HTML规范（id必须唯一），这也可能引发样式或JS的潜在问题。

修复步骤 #

• 移除#content和#sidebar上自定义的float、width属性，完全依赖Bootstrap栅格系统控制宽度与排列。
• 调整#content的内边距，避免和栅格自带的padding冲突。
• 删除#sidebar上多余的margin-right，微调padding-top让内容对齐。
• 将重复的id="post"改为class="post"，符合HTML标准。

修改后的完整代码 #

HTML部分 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page" class="container-fluid">
  <div class="row">
    <div id="content" class="col-md-9">
      <div class="post">
        <h2 class="title">Patronat honorowy – Dziekan Wydziału Historyczno-Socjologiczny UwB</h2>
        <p class="meta">Opublikowany dnia 05.03.2019</p>
        <div class="entry">
          <p> Chcielibyśmy powiadomić, że pani dziekan, dr hab. Joanna Sadowska, prof. UwB, zgodziła się objąć patronatem honorowy niniejszą konferencją naukową. </p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Patronat honorowy – Wojewoda Podlaski</h2>
        <p class="meta">Opublikowany dnia 05.03.2019</p>
        <div class="entry">
          <p> Jest nam również niezmiernie miło zdradzić, że do patronów honorowych niniejszej konferencji naukowej dołączył Wojewoda Podlaski, pan Bohdan Paszkowski. </p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Patronat medialny – Radio Białystok</h2>
        <p class="meta">Opublikowany dnia 23.02.2019</p>
        <div class="entry">
          <p>Z przyjemnością możemy oznajmić, iż lokalna rozgłośnia radiowa, Radio Białystok, obejmie patronatem medialnym organizowaną przez nas konferencję.</p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Patron wydarzenia</h2>
        <p class="meta">Opublikowany dnia 23.02.2019</p>
        <div class="entry">
          <p> Jest nam niezmiernie miło oznajmić, iż patronatem honorowym nad organizowanym przez nas wydarzeniem, zgodził się objąć Jego Magnificencja prof. dr hab. Robert W. Ciborowski. </p>
        </div>
      </div>
    </div>
    <!--boczny panel-->
    <div id="sidebar" class="col-md-3">
      <ul>
        <li>
          <h2>Nasi partnerzy:</h2>
        </li>
        <ul>
          <li><img src="http://www.uwb.edu.pl/pliki/logo/CMYK/w_uwb_kolor.jpg" alt=""></li>
          <li><img src="images/img5.jpg" alt=""></li>
          <li><img src="images/img6.jpg" alt=""></li>
          <li><img src="images/img7.png" alt=""></li>
        </ul>
      </ul>
    </div>
  </div>
</div>

CSS部分 #

#page { 
  width: 100%; 
  margin: 0 auto; 
  padding: 0; 
} 
/*treść*/ 
#content { 
  overflow: hidden; 
  color: #000000; 
  padding: 20px 15px 10px; 
  border-right: 1px solid #000000; 
} 
.post { 
  clear: both; 
  padding: 20px; 
  margin-bottom: 10px; 
  margin-left: 0; 
  border-bottom: 2px solid #000000; 
} 
.post .meta { 
  padding-bottom: 10px; 
  text-align: left; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 11px; 
} 
.post .entry { 
  text-align: justify; 
  margin-bottom: 25px; 
  padding: 10px 0px 0px 0px; 
} 
/*boczny panel*/ 
#sidebar { 
  overflow: hidden; 
  padding-top: 40px; 
} 
#sidebar ul { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
#sidebar li { 
  margin: 0; 
  padding: 0; 
} 
#sidebar h2 { 
  height: 38px; 
  margin-bottom: 20px; 
  padding: 5px 0 0 15px; 
  border-bottom: 2px solid #000000; 
  font-size: 24px; 
  color: #000000; 
  text-align: center; 
} 
#sidebar ul img { 
  width: 150px; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  padding-bottom: 20px; 
}

补充说明 #

• 给#page添加container-fluid类，确保Bootstrap栅格系统能正常发挥作用。
• 用row包裹content和sidebar，这是Bootstrap栅格的必要结构，保证列的正确排列。
• 把.post的margin-left改为0，避免内容过度偏移加剧空隙问题。

内容的提问来源于stack exchange，提问作者Buszek