能否用CSS为含display:block子元素的元素添加轮廓/背景色？

你的核心问题是外层inline元素无法包含内部块级元素的布局区域，导致背景和轮廓仅覆盖行内内容部分。要复刻Chrome DevTools的高亮效果，只需修改外层div的display属性，同时保持原有布局特性：

修改后的外层div样式 #

将外层div的display: inline替换为display: inline-block，并添加vertical-align: baseline确保和原行内元素布局一致：

<div style="background-color:rgba(0, 0, 255, 0.2);outline:1px solid red;display:inline-block;vertical-align:baseline">
  This should be marked
  <div>i want this too</div>
  and this too
</div>

原理说明 #

• inline-block兼具行内元素的布局特性（不会独占一行，可与其他行内元素共处一行）和块级元素的容器特性（自动计算高度以包含所有子元素，包括内部块级元素）。
• vertical-align: baseline保证该元素和原inline元素的垂直对齐方式一致，避免布局位置偏移。
• 此方案无需修改任何内部元素样式，完全符合你的限制条件，最终效果会让背景色和轮廓覆盖整个包含内部div的区域，和Chrome DevTools选中元素的高亮表现一致。

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