Why does my 60px have a 7.5px bottom-margin when I never set it and nothing registers in the 'Elements' console?

Question

I know you guys prefer stackcode, but this is a lot and didn't display properly when I tried that, however, I'll provide the basic context.

Here is the entire thing

And here is the summarized HTML & CSS:

#logoDiv{
}

#jqueryLogo{
    height: 60px;
    padding: 0;
    margin: 0;
}

/*vvv HEADER BELOW vvv*/

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    line-height: 54px;
    float: left;
}

<div id="logoDiv">
        <img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
   </div>
   
   
   <div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>

The issue: There is a 7.5px margin between the logo image and the header. I did not set any margins to cause this, and when I inspect the elements, nothing shows up there... but when I encapsulated the logo img with a div, it now shows the space as equalling that div.

How can I get rid of that margin between the header and logo image?

score 0 · Answer 1 · answered May 25 '18 at 05:34

Add just a display block to your image element as below as @Sol commented to your question

#jqueryLogo {
    height: 60px;
    display: block;
}

Display: block removes all the spaces from all side of your parent element and adjust it as per the actuall height and width of child element.

score -1 · Answer 2 · answered May 25 '18 at 04:39

It is because the image's display style is automatically set to inline

if you set the style on it to be the following, then it will remove that gap.

#jqueryLogo {
    display: flex;
    height: 60px;
    padding: 0;
    margin: 0;
}

I'm not exactly sure why the inline property adds that gap, but this should remove it.

https://jsfiddle.net/bg8oad8d/

score -1 · Answer 3 · answered May 25 '18 at 04:52

Here's a fixed issue

body{
    background: #0769AD;
    margin: 0;
    padding: 0;
    font-family: 'Teko', sans-serif;
}

.container{
    width: 96%;
    margin: 0 auto;
}

/*vvv TOPBAR vvv*/

#topbar{
    height: 30px;
    width: 100%;
    background: linear-gradient(#494949, #272727);
}

#leftTopbar{
    float: left;
}

#rightTopbar{
    float: right;
}

#rightTopbar > ul{
    list-style-type: none;
    display: inline-block;
    font-family: 'Helvetica', sans-serif;
    margin: 0;
}

#rightTopbar > ul > li{
    color: white;
    float: left;
    padding: 0px 12px 0px 12px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid black;
    font-size: 14px;
}

#rightTopbar > ul > li:hover{
   background-color: #242424;
}

/*vvv LOGO IMAGE vvv*/


#jqueryLogo{
    height: 60px;
    padding: 0;
    margin: 0;
    display:table;
}

/*vvv HEADER BELOW vvv*/

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
}

#header > ul{
    list-style-type: none;
    padding: 0px 20px 0px 20px;
    margin: 0px;
}

#header > ul > li{
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 20px;
    line-height: 54px;
    float: left;
}

#hero{
    background-color: white;
    border-radius: 0px 0px 10px 10px;
}

#hero-container{
    margin: 25px 100px 0px 100px;
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="demonstration.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
    <title>Demo</title>
</head>
<body>
   
   <div id="topbar">
       
       <div id="leftTopbar">
           
       </div>
       
       <div id="rightTopbar">
           <ul>
               <li>Plugins</li>
               <li>Contribute</li>
               <li>Events</li>
               <li>Support</li>
               <li>JS Foundation</li>
               <li></li>
           </ul>
       </div>
       
   </div>
   <div id="logoDiv">
        <img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
   </div>
   
   
   <div id="header" class="container">
       
       <ul>
           <li>Download</li>
           <li>API Documentation</li>
           <li>Blog</li>
           <li>Plugins</li>
           <li>Browser Support</li>
       </ul>
       
   </div>
   
   <div id="hero" class="container">
       
       <div id="hero-container">
           <p>This is a lot of text</p>

           <p>This is a lot of text</p>

           <p>This is a lot of text</p>

           <p>This is a lot of text</p>
       </div>
   </div>
    
</body>
</html>

Why does my 60px have a 7.5px bottom-margin when I never set it and nothing registers in the 'Elements' console?

3 Answers3