Перетяжка на пролет перекрывающихся на других элементах

Question

Предполагая, что этот HTML/CSS код:

tr, td { 
 
    border: solid 1px black; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
#x { 
 
    border: solid 1px black; 
 
    padding: 10px; 
 
    background: green; 
 
}

<table> 
 
    <tr> 
 
    <td>X</td> 
 
    <td>Y</td> 
 
    </tr> 
 
</table> 
 
<span id="x"> 
 
    totosss 
 
</span>

Почему зеленый диапазон перекрывается на столе, и как избежать этого?

Answer 1

Это потому, что прокладка в встроенных элементах не похожа на высоту линии. Если изменить встроенный элемент инлайн-блок или элемент блока он работает, как вы ожидали

tr, td { 
 
    border: solid 1px black; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
} 
 
#x { 
 
    border: solid 1px black; 
 
    padding: 10px; 
 
    background: green; 
 
    display: inline-block; 
 
}

<table> 
 
    <tr> 
 
    <td>X</td> 
 
    <td>Y</td> 
 
    </tr> 
 
</table> 
 
<span id="x"> 
 
    totosss 
 
</span>