- 上下两个元素挨在一起
当一个元素位于另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>div {border: 1px solid #F00;margin: 30px;font-size: 26px;}</style></head><body><div>div1</div><div>div2</div><div>div3</div></body></html>
2.当元素设置浮动后外边距不会合并
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><style>div {border: 1px solid #F00;margin: 30px;font-size: 26px;}div {float: left;}</style></head><body><div>div1</div><div>div2</div><div>div3</div></body></html>