<!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>