Question

所以我在网上找到这段javascript代码来解决文本可扩展性问题。视图源：http://www.spookandpuff.com/examples/dynamicTextSize.html
在我的代码上添加它之后。我的容器之间有一些空白区域，都是图像。只有在我添加脚本后才会出现空白区域，如果删除它，它将消失。有谁知道如何删除这个空白区域？

注意：我的div标签之间没有空格。

.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和page2是容器。图像和文本都在容器中

Answer 1

如果我理解正确，请尝试添加css属性：

img {
    display: block;
}

默认情况下，图像是内联元素，因此此样式有助于删除图像下方的空白区域。

Answer 2

这是因为默认情况下图像是内嵌显示的，与文本垂直对齐。您可以通过两种方式解决这个问题：

如果您希望保持图像内嵌显示，请在图像上设置display：block，或者设置vertical-align：top。

我添加javascript代码后容器之间的空白区域

2 个答案: