html - 在 div 前后添加换行符的最佳方法是什么？

Question

有人向我展示了一个使用 div 标签显示一些包含背景图片的文本的 html

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

这里类 img1 和 img2 包括两个背景图像，并且 img2 的相应 div 将显示在 img1 旁边(没有间隙)。我需要重复整个模式几次以显示内容不同但格式相同的内容。

<!-- 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>"

但我发现，如上图所示，任意两组之间都没有分离。坦白说，我真的没有html方面的经验，我只是从别人那里复制代码。但是在网上搜索之后，我找到了
命令，我尝试在组之间添加那个标签，但似乎中断比我预期的要多。还有其他方法可以插入更小间隙的分隔吗？

Answer 1

你可以像这样从 top 和 bottom 提供 margin:

margin: 10px 0;

Above 将从顶部和底部应用 10px 边距。您还可以使用单独的属性，例如 margin-top 和 margin-bottom。