title: what's the best way to add a line break before and after div?
body: <p>Someone shows me a html to use div tag to show some text with background image included</p>
  
  <pre><code>&lt;div class='main'&gt;
     &lt;div class='img1'&gt;
        SOME TITLE TEXT
     &lt;/div&gt;  
  &lt;/div&gt;";
  &lt;div class='img2'&gt;"
    SOME DESCRIPTION TEXT HERE
  &lt;/div&gt;"
  </code></pre>
  
  <p>Here the class img1 and img2 include two background images and the corresponding div for img2 will be shown next to img1 (without gap). I need to repeat the whole pattern couple times to show something with different content but same format. </p>
  
  <pre><code>&lt;!-- GROUP 1 --&gt;  
  &lt;div class='main'&gt;
     &lt;div class='img1'&gt;
        SOME TITLE TEXT 1
     &lt;/div&gt;  
  &lt;/div&gt;";
  &lt;div class='img2'&gt;"
    SOME DESCRIPTION TEXT HERE 1
  &lt;/div&gt;"
  &lt;!-- GROUP 2 --&gt;  
  &lt;div class='main'&gt;
     &lt;div class='img1'&gt;
        SOME TITLE TEXT 2
     &lt;/div&gt;  
  &lt;/div&gt;";
  &lt;div class='img2'&gt;"
    SOME DESCRIPTION TEXT HERE 2
  &lt;/div&gt;"
  </code></pre>
  
  <p>But I found that there is no separation between any two groups as shown above. Frankly, I really have no experience in html, I just copy the code from someone else. But after searching online, I find the <br> command, I try to add that tag in between the groups but it seems that the break is too much than I expect. Is there any other way to insert separation with smaller gap? </p>