添加JavaScript代码后，容器之间的空白

Question

So i find this piece of javascript code online to solve text scalable problem. view-source: http://www.spookandpuff.com/examples/dynamicTextSize.html
After I add this on my code. there are some white space between my containers which are all images. The white space only come out after i add script, it will disappear if i delete it. Anyone knows how to remove this white space?

Note: there are no space between my div tag.

.page1{
position:relative;
width:100%;
}

first_page_image{
width:100%;
}

.page1_text{
 position:absolute;
 bottom: 4%;
    margin-left:14%;
}
}
page2{
position:relative;
width:100%;
}

.second_page_image{
width:100%;
}

page2_text{
position:absolute;
margin-left:14%;
}

page1 and page2 are containers. image and text are all in the container

Answer 1

If I understand you correctly, then try to add a css property:

img {
    display: block;
}

Image by default is inline element so this style will help to remove whitespace below image.

Answer 2

That's because images by default are displayed inline, vertically aligned with text. You can solved this in two ways:

Either set display:block on your images, or set vertical-align:top, if you wish to keep images displayed inline.