[分享]css内容撑开设置下外边距

CSS内容撑开设置下外边距，在网页布局中经常用到，可以让页面更加美观。通过简单的设置，就可以实现页面元素间的间隔，增加页面的重心和平衡感。.box { display: inlineblock; wi...

CSS内容撑开设置下外边距，在网页布局中经常用到，可以让页面更加美观。通过简单的设置，就可以实现页面元素间的间隔，增加页面的重心和平衡感。

.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #eee;
  margin: 20px;
} 

上面的 CSS 代码设置了类名为“box”的元素，包含了宽度、高度、背景颜色、以及外边距属性。其中，display 属性设置为 inline-block，可以使元素之间不会出现换行的情况，而是一排排的排列。

width 和 height 属性设置元素的宽度和高度，而 margin 属性设置外边距。这里的 margin 为 20px，即元素和页面边缘的外边距为 20px，这样就可以形成元素之间的间隔了。

如果在设置样式时不考虑外边距，页面就会变得很拥挤，没有美感。因此，CSS 内容撑开设置下外边距，不仅可以增加页面的空隙，还可以让内容更加清晰明了。