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 -
第一个元素类似于左侧的帖子,第二个元素是带有顾客徽标的侧边栏。第一个元素以内容开头,第二个元素称为侧边栏。
解决方案
删除 Bootstrap 类并调整侧边栏的大小。同时从侧边栏中删除 margin-right。
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;
}
推荐阅读
- c# - 如何检查日期是否在另一个日期的一周或一个月内
- google-app-engine - Cloud SQL 秒生成中止问题
- c++ - 按位比较效率
- delphi - 如何在不选择所有节点的情况下禁用 TreeView 控件?
- angular - 如何将 CKEDITOR 安装到 Angular 项目并添加插件
- javascript - 反应保持间隔在后台运行
- angular - 在指令中从页面中添加/删除 HTML 元素
- javascript - 如何使用 Puppeteer (node.js) 滚动 div?
- numpy - 易于使用的特征函数自适应网格细化 - Python
- javascript - 删除重复项并按最常见的标签对数组进行排序