<!DOCTYPE html>
<head>
<style>
div { margin: 1em 0; }
</style>
</head>
<body>

<div>

<div>
<p>LTR</p>

<span style="padding: 0 20px; background: green; border: 2px solid red">aaa<div>bbb</div>ccc</span>
</div>

<hr>

<div>
<p>LTR, empty inline after.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red">aaa<div>bbb</div></span>
</div>

<hr>

<div>
<p>
LTR, empty inline before.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red"><div>bbb</div>ccc</span>
</div>

<hr>

<div>
<p>LTR, empty inline before and after.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red"><div>bbb</div></span>
</div>

</div>

<hr>

<div style="direction:rtl">

<div>
<p>RTL</p>

<span style="padding: 0 20px; background: green; border: 2px solid red">aaa<div>bbb</div>ccc</span>
</div>

<hr>

<div>
<p>RTL, empty inline after.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red">aaa<div>bbb</div></span>
</div>

<hr>

<div>
<p>RTL, empty inline before.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red"><div>bbb</div>ccc</span>
</div>

<hr>

<div>
<p>RTL, empty inline before and after.</p>

<span style="padding: 0 20px; background: green; border: 2px solid red"><div>bbb</div></span>

</div>
</div>