TEXT-INDENT deformating IMG在HTML

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; 
} 

發生了什麼是：首先圖像的大小調整發生在它有縮進之前應用，因此圖片的右邊距離定義的填充（3em）與縮進（1.5em）的大小不同，不應在縮進後重新調整圖像大小？

然後即使與text-indent: 0em;圖像仍然遵循p + p的規則，並有縮進。

我解決了將最大寬度設置爲96％而不是100％的問題，但是沒有更合理的解決方法嗎？

感謝

Answer 1

圖像的max-width由包含圖像的p的寬度決定。 text-indent不會更改p的寬度，但會將文本/圖像移入，這將導致圖像懸空。底線，你看到了正確的行爲。

您需要修改您的html/css才能達到預期的效果。沒有一個更完整的例子，我不能提供替代方法。您可以在圖像上嘗試position: absolute，這會導致圖像進入左上角（忽略text-indent和padding）。如果您嘗試此操作，請不要忘記在p上設置position: relative。

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; 
}