HTML新手求助：如何让<ins>标签背景色覆盖内部<img>？

问题重现 #

你将<img>嵌套在<ins>标签内，代码如下：

<ins style="background-color: green; ">
     <img alt="image" src="image1.jpg">
</ins>

目前仅能看到图片底部有绿色线条，希望<ins>的绿色背景色覆盖整张图片，设置宽度为100%无效。

解决方案 #

修改<ins>的display属性，让它能包裹住内部图片：

方案1：设置为块级元素 #

<ins style="background-color: green; display: block;">
     <img alt="image" src="image1.jpg">
</ins>

方案2：设置为行内块元素（需保持行内布局时使用） #

<ins style="background-color: green; display: inline-block;">
     <img alt="image" src="image1.jpg">
</ins>

原因说明 #

<ins>标签默认是行内元素，行内元素的高度由文本行高决定，不会自动扩展以容纳内部的替换元素（比如<img>），所以背景色只会显示在文本基线附近的窄条区域，也就是你看到的底部绿色线条。

将display改为block或inline-block后，元素会根据内部内容自动调整尺寸，背景色就能完整覆盖图片区域了。

内容的提问来源于stack exchange，提问作者chirag gupta