左边框和文字之间没有空格，很棒。 但为什么我在顶部边框和文本之间有空格？
打印屏幕： Print screen - Space between text and top border
代码：（html + CSS）
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Philosophia Blog</title>
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Mortinez Walles">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<style>
.post {
width: 784px;
height: auto;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.post-title {
min-height: 15px;
width: 100%;
background-color: #55585d;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
color: #6ed3cf;
}
.post-title h2 {
font-size: 16px;
padding: 5px;
margin: 0px;
font-weight: 800;
}
.post-title a {
text-decoration: none;
color: #6ed3cf;
transition: letter-spacing 2s,
-moz-color 2s;
-o-transition: letter-spacing 2s,
color 2s;
-webkit-transition: letter-spacing 2s,
color 2s;
transition: letter-spacing 2s,
color 2s;
}
.post-title a:hover {
text-decoration: none;
color: #FFFFFF;
letter-spacing: 1px;
}
.post-date-author {
font-size: 14px;
display: inline-block;
}
.social {
float: right;
display: inline-block;
margin: 2px;
font-size: 14px;
}
.social img {
vertical-align: middle;
}
.post img {
transition: filter 1s;
}
.post img:hover {
-moz-filter: brightness(130%);
-webkit-filter: brightness(130%);
-o-filter: brightness(130%);
filter: brightness(130%);
}
</style>
<article>
<div class="post">
<header>
<div class="post-title">
<h2><a href="#">Przykładowy Tytuł Strony</a></h2>
</div>
<div class="post-date-author">
Teext 2952890582095820958025820958
</div>
<div class="social">
Udostępnij
<img src="" data-src="facebook.png"/>
</div>
</header>
<section>
<img src="" data-src="test2.jpg" width=100% height="90px" alt="opis"/>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
</div>
</section>
</div>
</article>
<article>
</body>
</html>
为什么会这样？ 怎么处理呢？ 这是什么？ ：）
答案 0 :(得分：1)
试试这个。我改变了：
.post-date-author {
font-size: 14px;
display: inline-block;
}
要：
.post-date-author {
font-size: 14px;
float: left;
}
还删除了社交课程的2px余额：
.social {
float: right;
display: inline-block;
font-size: 14px;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Philosophia Blog</title>
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Mortinez Walles">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<style>
.post {
width: 784px;
height: auto;
box-shadow: 3px -3px 6px 0px #000000,
-1px 1px 1px 0px #000000;
margin: 10px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.post-title {
min-height: 15px;
width: 100%;
background-color: #55585d;
border-bottom: 2px solid #44474c;
border-top: 2px solid #44474c;
text-align: center;
color: #6ed3cf;
}
.post-title h2 {
font-size: 16px;
padding: 5px;
margin: 0px;
font-weight: 800;
}
.post-title a {
text-decoration: none;
color: #6ed3cf;
transition: letter-spacing 2s,
-moz-color 2s;
-o-transition: letter-spacing 2s,
color 2s;
-webkit-transition: letter-spacing 2s,
color 2s;
transition: letter-spacing 2s,
color 2s;
}
.post-title a:hover {
text-decoration: none;
color: #FFFFFF;
letter-spacing: 1px;
}
.post-date-author {
font-size: 14px;
float: left;
}
.social {
float: right;
display: inline-block;
font-size: 14px;
}
.social img {
vertical-align: middle;
}
.post img {
transition: filter 1s;
}
.post img:hover {
-moz-filter: brightness(130%);
-webkit-filter: brightness(130%);
-o-filter: brightness(130%);
filter: brightness(130%);
}
</style>
<article>
<div class="post">
<header>
<div class="post-title">
<h2><a href="#">Przykładowy Tytuł Strony</a></h2>
</div>
<div class="post-date-author">
Teext 2952890582095820958025820958
</div>
<div class="social">
Udostępnij
<img src="" data-src="facebook.png"/>
</div>
</header>
<section>
<img src="" data-src="test2.jpg" width=100% height="90px" alt="opis"/>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
</div>
</section>
</div>
</article>
<article>
</body>
</html>