Блог

Главная - Вопросы по программированию - Как я могу удалить пробел между двумя элементами на веб-сайте?

Как я могу удалить пробел между двумя элементами на веб-сайте?

#css

#css

Вопрос:

У меня есть два раздела, которые я хотел бы очистить от пробелов между ними. Как я могу это сделать? У вас есть код этого раздела в ссылке 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>

Правка2: https://codepen.io/anon/pen/JzNVjV —

Первый элемент представляет собой что-то вроде сообщений с левой стороны, а второй — боковую панель с логотипом посетителей. Первый элемент начинается с содержимого, а второй называется боковой панелью.

Комментарии:

1. В codepen, похоже, все работает просто отлично…

2. Чем причина, по которой он отображается по-разному на веб-сайте, может быть из-за bootstrap?

3. @Buszek Как говорит Мигель, это отлично работает в codepen. Попробуйте прокомментировать вашу загрузку и посмотреть, останется ли результат тем же. Какой тип начальной загрузки вы используете?

4. col-md-12 вместо col-md-9 используйте class, чтобы он заполнял всю строку 😉

5. Попробуйте изменить ширину #sidebar на 20% и убрать правое поле. Я думаю, что с этим вам также не понадобятся классы bootstrap.

Ответ №1:

Удалите классы начальной загрузки и измените размер боковой панели. Также удалите поля — справа от боковой панели.

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;
}