CSS样式margin: 1%； 详细解读
属性值：1%
1%是一个相对长度值，它是相对于元素的包含块（通常是父元素）的宽度来计算的。- 例如，如果父元素的宽度是
1000px，那么1%的外边距意味着在元素的上、下、左、右四个方向上都会留出10px的空白区域（1000px * 1% = 10px）。
- 当
margin: 1%;应用于一个元素时，该元素的上、下、左、右四个边距都将是其包含块宽度的 1%。这会在元素的四周创建一个等比例的空间，将其与相邻元素或父元素的边缘分隔开。 - 这个属性可以有效地控制元素之间的间距，帮助组织页面布局，避免元素之间过于拥挤，增强页面的可读性和美观性。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: #ddd;
margin: 1%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>在上述示例中，.box 元素具有 width: 200px; 和 height: 100px; 的尺寸，并且 margin: 1%;。如果将这个元素放在一个宽度为 1000px 的父元素中，该元素四周将有 10px 的外边距，将它与相邻元素或父元素的边界分隔开。
注意事项
- 当使用百分比作为
margin的值时，计算是基于父元素的宽度，而不是高度，这是margin属性的一个特性。 margin属性也可以使用其他值，例如：margin: 10px;：上、下、左、右四个边距都为10px。margin: 10px 20px;：上下边距为10px，左右边距为20px。margin: 10px 20px 30px 40px;：上、右、下、左的边距分别为10px、20px、30px、40px。
总之，margin: 1%; 是一种简单有效的设置元素外边距的方式，能够根据父元素的宽度自动调整元素的外部空间，对于创建灵活和适应性强的页面布局非常有用。