div與文本和邊框之間的空格，爲什麼？

左邊框和文字之間沒有空格，很棒。但爲什麼我有頂部邊框和文本之間的空間？div與文本和邊框之間的空格，爲什麼？

打印屏幕： 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>

爲什麼會出現這種情況？如何處理它？這是什麼？ :)

來源

2017-05-17 Adrianno Barello

試行高的CSS那文字 – tech2017

如果你檢查源在dom中是否有'o'？ – ThisGuyHasTwoThumbs

爲什麼display-inline塊會創建這個空間？和浮動;左不？ –

試試這個。我改變：

.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>

來源

2017-05-17 14:17:20

爲什麼display-inline塊會創建這個空間？和浮動;左不？ –

檢查了這一點：http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward –

作爲上述文章的概要，內聯塊的默認垂直定位元素是基準。我上面的示例的另一種解決方案是刪除.social類的邊距，並將.post-date-author的垂直對齊設置爲vertical-align：top –

div與文本和邊框之間的空格，爲什麼？

回答

相關問題