如何设置嵌套span的子元素尺寸与父span一致且不改变父元素大小

现有代码结构 #

<span data-dvc-cd="R03" data-item-code="sCO" data-item-start="" data-item-end="" data-item-unit="" data-item-level1= "" data-item-level2="" data-item-level3="" class="on">
  <span class="txt" style="width: 60px;">Carbon monoxide</span>
</span>

解决方法 #

以下两种方案都可以在不改动DOM结构、不影响原有图表样式的前提下实现需求：

• 样式适配方案（无需修改事件逻辑）
  给内层.txt类span添加如下CSS即可让子元素尺寸完全匹配父元素，不会撑大父容器：

.txt {
  display: inline-block;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

如果父span本身设置了内边距，再补充对应样式抵消内边距的影响即可：

.txt {
  /* 数值和父元素的padding值保持一致即可 */
  margin: -2px -4px;
  padding: 2px 4px;
}

• 事件委托方案（无需修改元素样式）
  直接把原本绑定在内层span上的点击事件改绑到父span上，触发时直接执行原有逻辑即可，完全不会改动现有页面样式。

内容的提问来源于stack exchange，提问作者emarwa.mouma.35t