Learn CSS daily

css coffee
star在GitHub上关注download安装Chrome插件

生成你自己的 Playground

输入任意 CSS 属性，即时获得一个可交互的实时示例。

margin-inline
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin-inline: 15px;
  border-radius: 5px;
  text-align: center;
}

'margin-inline' CSS 属性用于设置元素的行内起始和行内结束边距。这个属性在控制布局中的水平间距时特别有用，尤其是在从左到右或从右到左书写的语言中。通过使用 'margin-inline'，您可以轻松调整间距，而无需为左边距和右边距指定单独的值。

margin-bottom
.box { background-color: lightblue; padding: 20px; margin-bottom: 20px; border: 1px solid blue; }

CSS 中的 'margin-bottom' 属性用于在元素下方创建空间。这个空间位于元素的边框外部，可以帮助垂直分隔元素，从而改善网页内容的布局和可读性。

margin-block-start
.container {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.title {
  margin-block-start: 40px;
  color: #333;
}

the.description {
  color: #666;
}

CSS中的'margin-block-start'属性用于设置块级元素开始处的边距空间，通常在垂直书写模式下是顶部边距。这个属性可以更好地控制布局，特别是在响应式设计中，通过调整元素周围的间距而不影响其他尺寸。

margin-block-end
.container {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.title {
  color: #333;
  margin-block-end: 30px;
}

description {
  color: #555;
  margin: 10px 0;
}

'margin-block-end' CSS 属性设置块级元素末端的边距区域，这个位置由书写模式决定。这个属性对于控制垂直布局中元素之间的间距非常有用，可以更好地控制设计和内容的流动。

margin-block
.container {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.title {
  margin-block: 30px;
  font-size: 2em;
}

.description {
  margin-block: 20px;
  font-size: 1.2em;
}

CSS中的'margin-block'属性允许您在一个声明中设置元素的垂直边距（上边距和下边距）。这个属性在块级上下文中控制间距时特别有用，使得布局管理更简单并提高可读性。它简化了语法，通过减少需要管理的单独边距属性数量来增强可维护性。