title: How to avoid shifting a small box that ends a paragraph to a position on its own at the beginning of the next line?
body: <p>I need a small box, like this &#9632;, at the end of a paragraph, 10px wide and starting 10px after the final full stop. My CSS is as follows:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.black-square {width:10px;
    height:10px;
    background:#000;
    display:inline-block;
    margin-left: 10px; }
  </code></pre>
  
  <p>This works fine, so long as the paragraph's last sentence does not end at or very close to the end of a line, when the square gets shifted to a position on its own on the next line, indented by 10px.</p>
  
  <p>How can I avoid this problem?</p>