0

There isn't space between left border and text, it is great. But why I have space between top border and text?

print screen: 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>

Why does this happen? How to deal with it? What is this? :)

Adrianno Barello
  • 127
  • 1
  • 12

1 Answers1

1

Try this. I changed:

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

To:

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

Also removed the 2px margin on the social class:

.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>
c-bro
  • 486
  • 2
  • 13
  • Why does display-inline block make this space? And float;left doesn't? – Adrianno Barello May 17 '17 at 17:09
  • Check this out: http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward – c-bro May 17 '17 at 17:38
  • As a synopsis of the above article, the default vertical positioning of an inline-block element is baseline. An alternative solution to my example above would be to remove the margin around the .social class and set the vertical alignment of .post-date-author to vertical-align:top – c-bro May 17 '17 at 17:43