css盒子的外边距 |css文本框对齐

CSS盒子模型中，外边距可以分为整合性外边距和单向外边距两种。整合性外边距是指多个盒子之间的外边距会合并成一个较大的外边距，如下例所示：

div {
margin: 20px;
}
div1 {
margin-top: 10px;
}
div2 {
margin-bottom: 30px;
}

上面的代码中，div1和div2的外边距会合并成为30px，因此它们之间的距离实际上是40px而不是10px和30px之和。这种情况可以通过设置overflow属性或使用padding来避免。

单向外边距就是指每个方向的外边距都可以单独设定，如下例所示：

div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

这样，div盒子上下左右的外边距分别为10px、20px、30px和40px。

在使用外边距时，需要注意对距离的掌控，避免过大或过小的距离会影响到网页的美观性和可读性。