Gaps Between An Img & A Div

I have div that contains a img element then directly below that is a div element then below that is another img element. My Problem: there should be no vertical gaps between any of

Solution 1:

The spaces are caused by the P tags' margins pushing the IMG tags away. Because of the way CSS works, the DIV's background doesn't cover the paragraphs' margins unless you set a border on it. If you add the code

div { border: 1px solid red; }

to your CSS, the you can see the DIV actually touches the IMG exactly.

Solution 2:

Set the margin for the Paragraph inside the div.Since P has a default margin you have to clear that first or set that to your desired value.

.pageBoxContent p{ font-family:Calibri,"Myriad Pro", Serif; margin:0;//adjust it}

If you want some gap inside p , you can set the first and last only like p:first & p:last

Solution 3:

It is because of browsers default margins on your <p> tags. You can see that if you add something like p{ margin: 0px; } to you css, the image touches the divs, but your text is also "squished" together

Solution 4:

As it involves images, it will be hard for me to re-produce the issue. Though try the following:

Remove newline (and or spaces) between IMG and DIV tags, like the following:

<img class="pageBoxTop" src="images/pageBoxTop.png" alt=""/><div class="pageBoxContent">

Solution 5:

div is a block level element. That means a div will always be in a new line of its own. If you want to put your div element in the line of another element, make your div inline.

div {
  display:inline;
}