时间戳

首页 > 解决方案 > display-inline-block 的上边距和文本对齐工作

html - display-inline-block 的上边距和文本对齐工作

问题描述

我知道左右边距都适用于display: inlineand display-inline: block。但请澄清是否适用于其中任何一个top margin。text-align如果是，为什么？

标签： htmlcssblockinlinedisplay

解决方案

当涉及到边距和填充时，浏览器会以不同的方式处理内联元素。虽然您可以添加左右边距/填充，但不能将它们添加到元素的顶部或底部。这是因为内联元素与页面上的内容一起流动，就像链接或文本一样。如果您能够在内联元素中设置顶部/底部边距/填充，则会破坏内容的流动。

至于文本对齐，这适用于inline-block, 和inline元素。我在下面添加了一个快速代码示例，显示text-align: center;了display: inline;和display: inline-block;元素。此示例还显示了适用于 inline-block 的顶部和底部边距，而不适用于 inline。

.inline-block {
  display: inline-block;
  margin-top: 30px;
  margin-bottom: 10px;
}
.inline {
  display: inline;
  margin-top: 30px;
  margin-bottom: 10px;
}
/* Start demo styles (not required) */
* {
  box-sizing: border-box;
}
html,body {
  margin:0;
  background: #95a5a6;
}
.container {
  width:50%;
  margin: 50px auto;
  background: white;
  padding: 10px 20px;
  text-align: center;
  font-family: arial;
  font-size: 16px;
}
hr {
  border: none;
  height: 2px;
  width: 100%;
  background: black;
  display: block;
}
/* End demo styles */
<div class="container">
  <div class="inline-block">
    Inline-Block Content
  </div>
  <hr>
  <div class="inline">
    Inline Content
  </div>
</div>

推荐阅读