Vue & List margin


i wanted to create a simple test app which has only one simple list. But the list always has the margin-top sett to 35px. Why does this happen?

Here is my code:

<f7-panel left cover>
  <f7-view id="left-panel-view">
      <f7-navbar title="Left Panel"></f7-navbar>
      <f7-block strong>
        <p>Left panel content goes here</p>
      <f7-block-title>Load page in panel</f7-block-title>
        <f7-list-item link="/about/" title="About"></f7-list-item>
        <f7-list-item link="/form/" title="Form"></f7-list-item>
      <f7-block-title>Load page in main view</f7-block-title>
        <f7-list-item link="/about/" title="About" view="#main-view" panel-close></f7-list-item>
        <f7-list-item link="/form/" title="Form" view="#main-view" panel-close></f7-list-item>

<!-- Main View -->
<f7-view id="main-view" main>

              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
              <f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
      <f7-list-item title="Item 1"></f7-list-item>
      <f7-list-item title="Item 2"></f7-list-item>

I suspect it is to match iOS design guidelines, which would specify space/padding between elements in a view.

You could always over-ride it with your own CSS.

1 Like