title: how do I get plus sign in rectangle in css?
body: <p>I am trying to achieve this plus sign in rectangle in red </p>
  
  <p><img src="https://i.stack.imgur.com/Z4zOY.png" alt="enter image description here"></p>
  
  <p>I tried it using css </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p align="left"&gt;
    Lorem ipsum dolor sit amet, consectetur
    adipiscing elit, sed do eiusmod tempor
    incididunt 
    &lt;span style="color:red; margin-left:47px; border: 1px solid red;"&gt;
      +
    &lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Its showing like below: </p>
  
  <p><img src="https://i.stack.imgur.com/WPEO3.png" alt="enter image description here"></p>
  
  <p>I am not able to understand why there is space at top and bottom of the plus sign.</p>
  
  <p>How can I get that plus sign in proper rectangle? </p>