目录
- 一、元素边界
- 二、边界属性导致的布局问题
-
- 2.1 外边距合并（Margin Collapse）
- 2.2 边框盒模型（Box Model）
- 2.3 内联元素的默认行高
一、元素边界
在 HTML 中，元素的边界通常指的是元素的边框（border）以及外边距（margin）和内边距（padding）。这些边界属性可以通过 CSS 进行设置和调整，用于控制元素的外观和布局。
-
边框（Border）：元素的边框是围绕元素内容的可选框线。它可以通过 CSS 的
border属性设置，包括边框的宽度、样式和颜色。边框位于元素的内边距和外边距之间。 -
内边距（Padding）：元素的内边距是元素内容与边框之间的空间。它可以通过 CSS 的
padding属性设置，用来控制元素内容与边框之间的间距。 -
外边距（Margin）：元素的外边距是元素边框与相邻元素之间的空间。它可以通过 CSS 的
margin属性设置，用来控制元素与相邻元素之间的间距。
这些边界属性可以帮助开发者控制元素的尺寸、位置和布局，从而实现各种复杂的页面布局和设计效果。
然而，在实际开发中，需要注意处理边界属性可能带来的布局问题，如外边距合并、边框盒模型等。对于一些复杂的布局，还可能需要借助 CSS 的布局技术和工具来解决边界问题，确保页面的正确显示和良好的用户体验。
二、边界属性导致的布局问题
一些边界属性可能带来的布局问题包括外边距合并、边框盒模型、内联元素的默认行高等。下面是一些具体的示例：
2.1 外边距合并（Margin Collapse）
当相邻元素的外边距相遇时，它们的外边距会合并为一个较大的外边距。这可能导致布局不符合预期，间距变得过大或者过小。
<div style="margin-bottom: 20px;">Div 1</div>
<div style="margin-top: 30px;">Div 2</div>
在这个例子中，Div 1 的下外边距和 Div 2 的上外边距会合并，使得它们之间的间距为 30px，而不是原本预期的 50px。如图：
要避免外边距合并（Margin Collapse），可以采用以下方法：
- 添加内边距或边
