Question

我知道var React = require('react'); module.exports = function SectionalSquareComponent(props) { return ( <div .....和display: inline的左边距和右边距都适用。但是请说明display-inline: block和top margin是否适用于其中任何一种。如果是，为什么？

Answer 1

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

对于文本对齐方式，这对inline-block和inline元素均适用。我在下面添加了一个快速代码示例，其中在text-align: center;和display: inline;元素上显示了display: inline-block;。此示例还显示了上下行边距适用于内联代码块，不适用于内联行。

.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>

将使显示行内块的上边距和文本对齐有效

1 个答案: