Css 为什么在某个媒体查询中，div内的内容换行后，填充top会消失？

在我的笔记应用程序中，我有一个显示所有笔记的仪表板。我现在让它响应，我有一个媒体查询在520px的改变字体大小的内容的div。一旦内容打破了一行填充顶部消失？（附图片）现在转到奇怪的部分。以前只要我改变字体大小，它就工作得很好。填充顶部不工作吗

我遗漏了什么吗？

为什么它不起作用？我如何才能实现填充顶部不会消失

提前谢谢

custom.css：

/*-----------------------------------NOTES------------------------------------*/

.note {
  width: 26%;
  float: left;
  box-sizing: border-box;
  margin: 6px 3.66%;
  padding: 0.4% 0.7%;
  height: 122px;
  background-color: silver;
  border-radius: 7px;
  overflow: hidden; 
}

.note:nth-child(3n+1){  
  clear: left;
}

.note-destroy {
  display: inline-block;
  width: 5.3%;
  float: right;
  color: white;
  font-family: roboto-regular, sans-serif;
  font-size: 17px;
  text-align: right;
  line-height: 13px;
}

.note-content-text {
  display: inline-block;
  width: 93.3%;
  height: 79.6%;
  text-align: left;
  text-align-last: left;
  font-family: roboto-regular, sans-serif;
  font-size: 17px;
  color: white;
  text-transform: uppercase;
  margin: 0;
}

.time-text {
  display: block;
  text-align: left;
  height: 19.6%;
  font-family: roboto-regular, sans-serif;
  font-size: 15px;
  color: white;
  margin: 0;
}
...
...

/*--------------------------------RESPONSIVE----------------------------------*/

@media screen and (max-width: 520px) {

  .note-content-text {
    font-size: 9.5px;
    height: 87.6%;
  }

  .note-destroy {
    display: none;
  }

  .time-text {
    font-size: 7.5px;
    height: 11.6%;
  }

index.html.erb

<% provide(:title, "Dashboard") %>

<div class="notes">
  <h4 class="notes-title">NOTES</h4>
  <%= link_to 'NEW NOTE', new_note_path, :class => "new-note" %>
  <div class="note-row"> 
    <% @notes.each do |note| %>
    <div class="note">
      <%= link_to note_path(note) do %>
        <p class="note-content-text"><%= truncate(note.content,
        :length => 75) %></p>
        <%= link_to 'x', note, :class => 'note-destroy', method: :delete,
        data: {confirm: 'Are you sure?'} %>
      <% end %>
      <%= link_to edit_note_path(note) do %>
        <p class="time-text"><%= time_ago_in_words(note.updated_at) %> ago</p>
      <% end %>
    </div>
    <% end %>
  </div>
</div>

笔记
“新注释”%>
75）%>
“注意销毁”，方法：：删除，
数据：{确认：'确定吗？}%>
以前

解决方案：

我发现并不是因为上面的垫子不见了。由于HTML中的换行，存在不需要的边距。我可以通过简单地将显示从“内联块”更改为“块”来解决这个问题。它现在起作用了，但我仍然不知道为什么会发生这种情况