-1

I'm designing a layout to be used on a social website. The site allows CSS/HTML elements. In my design there is a gap between two of my stacked divs. There is no gap in my code so I cannot understand why it is there.

Here is a screenshot: The black space between the header image and menu is the gap. enter image description here

Here is my HTML:

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="vfErin.css">
</head>
<html>
<body>
<div id="customProfile">
 <div id="customHeader">
  <img src="http://assets.jollyrogerpcs.com/vampirefreaks/axel/cover.png" width="100%">
 </div>
 <div id="customMenu">
  <a href="#">VF Home</a>
  <a href="#">Gallery</a>
  <a href="#">Journal</a>
  <a href="#">Add Me</a>
  <a href="#">Rate & Comment</a>
 </div>
</div>
</body>
</html>

And my CSS:

/* 
#67C8FF neon-blue 
#83F52C neon-green
*/
* {
   padding: 0;
   margin: 0;
   text-decoration: none;
   border: none;
   outline: none;
   list-style: none;
   transition: all 0.5s;
}
body {
   background-color: #000;
   text-align: center;
}
#customProfile {
   width: 900px;
   margin: 0 auto;
   text-align: left;
   border-left: 1px solid #67C8FF;
   border-right: 1px solid #67C8FF;

}
#customMenu {
   width: 900px;
   font-size: 0pt;
}
#customMenu a:link, #customMenu a:visited {
   display: inline-block;
   width: 20%;
   text-align: center;
   background-color: #67c8ff;
   font-size: 14pt;
   height: 30px;
   line-height: 30px;
}
Jesse Elser
  • 974
  • 2
  • 11
  • 39

1 Answers1

2

Tell the image to be a block level element like so:

img {
    display: block;
}

Better yet, give it a class so that you don't style all the images on the page. Because the image is an inline-block element it's subject to line-height, which is what I think is happening here.

EDIT: http://jsfiddle.net/z91kwzhw/1/

gautsch
  • 774
  • 6
  • 11
  • Odd solution since the img is inside a div which should automatically be a block element if i am not mistaken. Maybe I missed something in my code. – Jesse Elser May 23 '15 at 03:28
  • Instead of a class on the img, you might as well use the context: `#customHeader img { display: block; }` – connexo May 23 '15 at 03:30
  • 1
    You're correct, divs are block elements, but the image is still an inline-block living inside of a block element. It doesn't inherit the block properties of it's parent so you have to force it to be a block. – gautsch May 23 '15 at 03:30
  • Related: http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element – jmargolisvt May 23 '15 at 03:34