html - 在 BODY 标签上使用 margin-top 或 padding-top 有什么区别吗？

Question

我使用的是 70 像素高的粘性导航栏。所以为了让它正常工作并正确显示其余内容，我给 body 一个 padding-top (在这里，它来自......或 margin-top) 为 70px。

就我个人而言，我尝试使用填充而不是边距的原因是，当我使用边距时，我在模式中的 Google 自动完成实现出现了问题。

使用填充或边距有什么区别(或缺点)吗？我会遇到任何其他问题吗？

Answer 1

我认为这里你很难理解 padding 和 margin 之间的区别

1. 边距用于将一个元素与另一个元素分开

2.Padding是内容到边框的距离

检查以下片段

#div-1{
  border:1px solid red;
  width:300px;
  margin-top:20px;
  padding:10px;
}

#div-2{
  border:1px solid red;
  width:300px;
  margin-top:20px;
 padding-top:5px;
}

<div id="div-1">
  Div1
</div>

<div id="div-2">
  Div1
</div>

上面的代码片段带有填充和边距

无余地考虑这个

#div-1{
  border:1px solid red;
  width:300px;
  
  padding:10px;
}

#div-2{
  border:1px solid red;
  width:300px;
 padding-top:5px;
}

<div id="div-1">
  Div1
</div>

<div id="div-2">
  Div1
</div>

考虑这个没有填充的

#div-1{
  border:1px solid red;
  width:300px;
 
}

#div-2{
  border:1px solid red;
  width:300px;
}

<div id="div-1">
  Div1
</div>

<div id="div-2">
  Div1
</div>

希望这些片段能帮助您理解边距和填充