Espace entre le texte et la bordure de div, pourquoi?

Il n'y a pas d'espace entre la bordure gauche et le texte, c'est génial. Mais pourquoi ai-je un espace entre la bordure supérieure et le texte?Espace entre le texte et la bordure de div, pourquoi?

écran d'impression: Print screen - Space between text and top border

Code: (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>

Pourquoi cela? Comment faire avec? Qu'est-ce que c'est? :)

Source

2017-05-17 Adrianno Barello

line-height essayer css pour ce texte – tech2017

si vous inspectez la source, y at-il un 'o' dans le dom? – ThisGuyHasTwoThumbs

Pourquoi le bloc display-inline crée-t-il cet espace? Et flotter, à gauche ne le fait pas? –

Essayez ceci. J'ai changé:

.post-date-author { 
    font-size: 14px; 
    display: inline-block; 
}

Pour:

.post-date-author { 
    font-size: 14px; 
    float: left; 
}

a également supprimé la marge 2px sur la classe sociale:

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

Source

2017-05-17 14:17:20

Pourquoi le bloc display-inline crée-t-il cet espace? Et flotter, à gauche ne le fait pas? –

Check this out: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward –

Comme synopsis de l'article ci-dessus, le positionnement vertical par défaut d'un bloc en ligne l'élément est la ligne de base. Une solution alternative à mon exemple ci-dessus serait de supprimer la marge autour de la classe .social et de définir l'alignement vertical de .post-date-author sur vertical-align: top –

Espace entre le texte et la bordure de div, pourquoi?

Répondre

Questions connexes