如何删除网站上两个元素之间的空格?

问题描述 投票:-1回答:1

我有两个部门,我想清理它们之间的空间。我该怎么做?您在codepen链接中有此分区的代码。此处还添加了纯代码。

https://ibb.co/VqpwYzt - 这是我想要澄清的差距,:

#page {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}


/*treść*/

#content {
  overflow: hidden;
  width: 80%;
  float: left;
  color: #000000;
  padding: 20px 0 10px 30px;
  border-right: 1px solid #000000;
}

#post {
  clear: both;
  padding: 20px;
  margin-bottom: 10px;
  margin-left: 50px;
  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;
  float: left;
  width: 200px;
  padding-top: 40px;
  margin-right: 70px;
}

#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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="page">
  <div id="content">
    <div class="col-md-9" id="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="col-md-9" id="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="col-md-9" id="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="col-md-9" id="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 class="col-md-3" id="sidebar">
    <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>

EDIT2:https://codepen.io/anon/pen/JzNVjV -

第一个元素类似于左侧的帖子,第二个元素是带有顾客标志的侧边栏。第一个元素以内容开头,第二个元素从侧边栏开始。

css
1个回答
0
投票

删除Bootstrap类并调整侧栏的大小。同时从侧栏移除边距右侧。

HTML

    <div id="page">
 <div id="content">
  <div id="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 id="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 id="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 id="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">
  <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>

CSS

#page {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}


/*treść*/

#content {
    overflow: hidden;
    width: 70%;
    float: left;
    color: #000000;
    padding: 20px 0 10px 30px;
    border-right: 1px solid #000000;
}

#post {
    clear: both;
    padding: 20px;
    margin-bottom: 10px;
    margin-left: 50px;
    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;
    float: left;
    width: 20%;
    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;
}
© www.soinside.com 2019 - 2024. All rights reserved.