Question

Someone shows me a html to use div tag to show some text with background image included

<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE
</div>"

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.

<!-- GROUP 1 -->  
<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT 1
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE 1
</div>"
<!-- GROUP 2 -->  
<div class='main'>
   <div class='img1'>
      SOME TITLE TEXT 2
   </div>  
</div>";
<div class='img2'>"
  SOME DESCRIPTION TEXT HERE 2
</div>"

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

Answer 1

You can give margin from top and bottom like this:

margin: 10px 0;

Above will apply 10px margin from top and bottom. You can also use individual properties such as margin-top and margin-bottom.