[分享]css内边距和外边距重合

CSS边框模型包括了元素的外边距（margin）、边框（border）、内边距（padding）和元素的实际内容（content）。一般来说，内边距和外边距是分开计算的。内边距是用来控制元素内容和边框...

CSS边框模型包括了元素的外边距（margin）、边框（border）、内边距（padding）和元素的实际内容（content）。

一般来说，内边距和外边距是分开计算的。内边距是用来控制元素内容和边框之间的空间，而外边距是用来控制元素与周围元素之间的空间。但是，当外边距和内边距相遇时（即外边距与内边距重合），它们的效果会因个浏览器而异，甚至会破坏布局。

/*演示外边距和内边距重合*/
div {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  padding: 20px;
  margin: 10px;
} 

在上面的示例中，内边距和外边距都设置为了10px，而边框和内边距之间的距离为20px。这意味着边框会被包裹在内边距内，而外边距则会紧密贴合周围元素。

但是，如果在这个元素周围还有其他元素时，外边距和内边距的重合可能会导致布局破坏。具体效果因浏览器而异，但可能会使元素跨越其正常区域。

因此，在进行CSS布局时，要特别注意外边距和内边距的使用，以避免造成不希望的布局结果。