title: How to add space in a code area using HTML CSS
body: <p>I'm building a widget. So users have to copy-paste a code from my website into their HTML.</p>
  <p>I want to do 2 things.</p>
  <ol>
  <li><p>I want to add spaces in the code area like shown below. The space between different lines is to make code friendly to users.</p>
  </li>
  <li><p>There will be a copy code snippet button. On clicking on it users can copy the code.</p>
  </li>
  </ol>
  <p>I'm worried if I have <code>&lt;/br&gt;</code> in the code that will get copied
  along as well. Which I don't want.</p>
  <pre><code>&lt;code&gt;{` &lt;!-- Start of  client code snippet --&gt; 
                 
              &lt;script&gt;
  
                  (function (w, d, s, o, f, js, fjs) {
                      w[o] =
                          w[o] ||
                          function () {
                              (w[o].q = w[o].q || []).push(arguments);
                          };
                      (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
                      js.id = o;
                      js.src = f;
                      js.async = 1;
                      fjs.parentNode.insertBefore(js, fjs);
                  })(window, document, &quot;script&quot;, &quot;_hw&quot;, &quot;./widget.js&quot;);
                  _hw(&quot;init&quot;, { debug: true, clientID: &quot;abcd&quot; });
  
  
               &lt;/script&gt;
  
              &lt;!-- End of client code snippet --&gt;
              
             `} &lt;/code&gt;
  
  
  
  </code></pre>