Why padding-top disapears after a line break of the content inside a div at a certain media-query?

Question

In my note app I have a dashboard which shows me all the notes. I making it responsive now and I have a media query at 520px which changes the font sizes of the content of the div. As soon as the content breaks a line padding-top disappears? (pictures attached) and now to the strange part. It worked perfectly before as soon as I change the font-size padding-top doesn't work?

Am I missing something?

Why does it not work and how can I accomplish that the padding-top doesn't disappear?

Thanks in advance!

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>

SOLUTION:

I figured it out it was not that the padding-top was gone. There were unwanted margins due to line-break in HTML. I could solve that by simply change display from "inline-block" to "block". It works now but I still don't know why this occurred.