在网页布局中，垂直外边距合并是一个常见且容易让人困惑的问题。当两个相邻元素（兄弟元素或者父子元素）在垂直方向上设置了外边距时，它们之间实际显示的外边距往往并不是我们所期望的两者之和，而是取其中较大的值，这就是外边距合并现象。那么，相邻元素外边距怎样实现“共存”呢？

对于兄弟元素，我们可以通过将其中一个元素设置为行内块元素来避免外边距合并。行内块元素在布局上既具有块级元素可以设置宽度和高度的特性，又具有行内元素不会产生换行的特点。例如，将一个 div 元素设置为 display: inline-block，这样它与相邻元素之间的垂直外边距就会各自独立，不会发生合并。

另外，使用 overflow: hidden 也能起到作用。当为其中一个兄弟元素添加 overflow: hidden 样式时，它会创建一个新的 BFC（块级格式化上下文）。在新的 BFC 中，元素的布局是独立的，与外部元素互不干扰，从而避免了外边距的合并。

而对于父子元素，给父元素添加 padding 或者 border 是实现外边距“共存”的有效方法。比如，给父元素设置一个很小的 padding-top 或者 border-top，这会使得子元素的外边距不会与父元素的外边距直接接触，从而避免了合并。

还有一种情况是使用 flex 布局。当父元素设置为 display: flex 时，它内部的子元素也会创建一个新的格式化上下文，这样父子元素之间的外边距就不会合并，实现了“共存”。

在实际的网页开发中，深入理解垂直外边距合并的原理，并掌握这些实现“共存”的方法，能够帮助我们更精准地控制页面布局，避免因外边距合并而导致的布局错乱问题，提升页面的视觉效果和用户体验。