在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包含两个背景图像，并且img1旁边将显示img2的对应div（无间隙）。我需要重复整个模式几次，以显示内容不同但格式相同的内容。

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

您可以像这样从margin和top中给bottom：

margin: 10px 0;

以上将在顶部和底部应用10px边距。您还可以使用各个属性，例如margin-top和margin-bottom。

Answer 2

一种方法是使用css样式化元素。

<style>
.main
{
  margin-bottom: 10px;
}
</style>

您可以根据需要进行更改。不确定要分隔的div

Answer 3

有两种添加换行符的主要方法：通过换行符<br>标签和通过段落标签<p>。因此，您要做的就是将这些标签放在标签之间。

Answer 4

[将子div添加到如下所示的范围内

<div class="class1" >
   <span class="span1">
         data1 
       <br>
       <span class="span2">
            data2
       </span>
    </span>
</div>

css：

   .span1{
      display:inline-block;
    }
    .span2{
      display:inline-block;     
    }




    </div>