Question

我的博文中有一条规则：

p + p {
text-indent: 1.5em;
}

在div中定义：

.entry-content{
    padding: 2em 3em 4em;
}

我在<p>里面有一些像这样定义的图片：

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    text-indent: 0em;
}

发生的事情是：首先调整图像的大小，然后才应用缩进，因此图片的右边距超出了缩进（1.5em）大小的定义填充（3em），不应该缩进后图像是否会调整大小？

然后即使使用text-indent: 0em;，图像仍然遵循p + p中的规则并且有缩进。

我解决了将最大宽度设置为96％而不是100％的问题，但是没有更合理的解决方法吗？

感谢

Answer 1

图像的max-width由包含图像的p的宽度决定。 text-indent不会更改p的宽度，但会移动文本/图像，这会导致图像悬垂。最重要的是，你看到了正确的行为。

您需要修改html / css以获得所需的结果。没有更完整的例子，我无法提供替代方法。您可以在图片上尝试position: absolute，这会导致图片转到左上角（忽略text-indent和padding）。如果您尝试此操作，请不要忘记在包含position: relative。

上设置p

p + p {
    text-indent: 1.5em;
    position: relative;
}

p > img {
    margin-bottom: 0.5em; 
    max-width: 96%; 
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

html中的文本缩进变形图像

1 个答案: