Question

当我在Wordpress帖子中向左或向右对齐图像时，底部边距变得混乱。 Here is a post showing what I mean.您会看到图像和文本之间的空间太大（图像比文本高）。以下代码纠正了该问题

div.wp-block-image { margin-bottom: -5px; }

但是，此代码弄乱了左右like this post左右未对齐的图像。文本基本上触摸了图像并且太靠近了。有没有办法只选择左/右对齐的图像？

我真的很感谢能帮助我解决这个小问题但非常烦人的问题的人:)

Answer 1

实际上，您应该更改图形元素的底边距，因为这些元素具有底边距。

我注意到，如果您的图形元素分别是左对齐或右对齐，则它们具有alignright和alignleft类，因此仅定位那些您可能想要的图像：


figure.alignleft, figure.alignright {
    margin-bottom: 0.6rem; // Or whatever you think looks best
}

请注意，除非确保图像高度始终是行高的倍数，否则图像下方的实际空白量将取决于图像的高度。

编辑：

我想我误解了您的问题，并认为这与图像下方的空白有关，但是您实际上是在谈论图像的顶部与文本的顶部不一致。因此，类为wp-block-image的图形的包含元素不包含图形，它的底边距将文本向下推。您可以使用以下方法解决此问题：


.wp-block-image {
    display: inline-table;
    float: left;
}

但这仅适用于左对齐图像。您需要float: right才能右对齐图像。除非您可以在.wp-block-image上获得一个类来指示图像是左对齐还是右对齐，而不是在figure内的.wp-block-image元素上对齐，否则无法选择.wp-在2种不同情况下都能正确显示图像。您有这样做的设施吗？

我唯一能想到的其他解决方案是将第一个p元素推高与.wp-block-image的底部边距将其推下的幅度相同，用：

.entry-content p:nth-of-type(1) {
    margin-top: -1em;
}

校正左/右对齐图像的底部边距Wordpress

1 个答案: