有趣的问题。。。我在Chrome中进入页面,使用开发工具(ctrl+shift+I)或右键单击元素并选择Inspect。
图像显示在Flexbox中,看起来Flexbox和其上方的块之间存在冲突。有很多方法可以解决这个问题,第一种也是最简单的,但最有可能的错误解决方法是在包含Tony名字的段落后换行。然而,这并不是一个好的解决方案,它只是增加了空间,隐藏了问题。
我还注意到Flexbox中的图像向上偏移了1.5em。进一步检查表明,图像上有一种样式:
.entry-content img {
margin: 0 0 1.5em 0;
}
这会在1.5em的图像上放置一个下边距,然后图像会在应用于下边距的1.5em处落在FlexBox之外。
如果将此边距设置为0,则可以解决问题。
.entry-content img {
margin: 0 0 0 0;
}
我不知道为什么这只会出现在Wordpress 5.0中,并期待其他成员的建议。但是,我确实认为应用于图像的边距以及100%的高度设置是不正确的,应该删除底部边距或将其设置为0。