如何为div元素添加间距？附相关代码示例

嘿，给这个div添加间距其实很简单，我给你分享几种常用的方法，你可以根据需求选：

方法1：直接用内联样式（快速调整） #

你可以直接在div的style属性里添加margin或者padding属性，两者的区别是：

• margin是这个div和外部其他元素之间的间距
• padding是div内部内容和div边框之间的间距

比如想给div上下左右都加20px的外部间距，代码改成这样：

<div style="clear: left; margin: 20px;">
  <p class="image"><img src="https://blog.proven.com/wp-content/uploads/zipsqaure.jpg" height="200" width="200" border="1px"></p>
  <p class="rating"><strong><font size="4">Proven Rating: <font color="#0077b3">★★★★★</font></font></strong></p>
  <p class="description">ZipRecruiter allows employers to post jobs within minutes ...</p>
</div>

如果只想给上下加间距、左右不加，或者单独给底部加间距，可以这样写：

<!-- 上下15px间距，左右0 -->
<div style="clear: left; margin: 15px 0;">
<!-- 仅底部加30px间距 -->
<div style="clear: left; margin-bottom: 30px;">

方法2：用CSS类（更利于维护） #

如果这个样式要复用，建议定义一个CSS类，比如在你的样式表中添加：

.spaced-container {
  clear: left;
  margin: 20px; /* 按需调整数值 */
  /* 也可以加padding: 10px; 来调整内部间距 */
}

然后div改成：

<div class="spaced-container">
  <!-- 内容不变 -->
</div>

这样后续要调整间距，只需要修改CSS类的属性就行，不用改每个div的内联样式~

内容的提问来源于stack exchange，提问作者paigeg422