为什么我无法在html页面中看到margin属性？

Question

我正在尝试设计一些东西，但即使添加了margin属性，我也无法看到更改。 下面是我的HTML代码。

.side {
  background-color: teal;
  display: inline;
  padding: 7px;
  margin-top: 20px;
}

<div>
  <span>Task Managment To-do list</span>
</div>
<div class="row">
  <div class="col s3 offset-s1">
    <header class="side" id="day">Date Section</header>
  </div>
  <div class="col s2 offset-s3">
    <header class="side">
      Navigations
    </header>
  </div>
</div>

Answer 1

使用yourController obj= new yourController(); obj.yourAction(); 而非display: inline-block;，因为display: inline;和margin-top不适用于内联元素

margin-bottom

.side {
  background-color: teal;
  display: inline-block;
  padding: 7px;
  margin-top: 20px;
}

Answer 2

您可以尝试此操作或将inline更改为block或inline-block

＆＃13;

＆＃13;

.side {
  background-color: teal;
  display: inline;
  padding: 7px;
  line-height: 400%;
}

＆＃13;

<div>
  <span>Task Managment To-do list</span>
</div>
<div class="row">
  <div class="col s3 offset-s1">
    <header class="side" id="day">Date Section</header>
  </div>
  <div class="col s2 offset-s3">
    <header class="side">
      Navigations
    </header>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;