good way to create margin to the top for the first element

admin

Administrator
Staff member
I have list that I render with <a href="/questions/tagged/semantic-ui" class="post-tag" title="show questions tagged &#39;semantic-ui&#39;" rel="tag">semantic-ui</a> and it needs some margin to the top for the first element. I looked in the CSS code and I see
Code:
margin-top:0!important
and I can override it for the first element with
Code:
margin-top:10px!important;
and then the rendering looks good. Is there a better way to achieve it? My code (without the fix) is

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override">
Code:
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" /&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;div class="container"&gt;
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li class="nav active"&gt;&lt;a href="#A" data-toggle="tab"&gt;All&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav"&gt;&lt;a href="#B" data-toggle="tab"&gt;Company&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav"&gt;&lt;a href="#C" data-toggle="tab"&gt;Private&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
    &lt;div class="tab-pane fade in active" id="A"&gt;
      &lt;div class="ui divided items"&gt;
        &lt;div class="item"&gt;
          &lt;div class="ui left floated"&gt;
            7 July.
            &lt;br&gt;3:33
          &lt;/div&gt;
          &lt;div class="image"&gt;
            &lt;a href="/vi/5022701123010560.html"&gt;
              &lt;img src="http://lh3.googleusercontent.com/JZkr-b_aWlYrFG1G-EUywZgucJE3JV1wgz4yQGrx-bGaw_va7dymsaTMXhK5t6ZkUdjWLeHlNaiksVNAMp8I1epB-Q=s150" title="Wordpress development company, website developer" alt="Wordpress development company, website developer"&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
            &lt;a class="header" href="/vi/5022701123010560.html"&gt;Wordpress development company, website developer&lt;/a&gt;
            &lt;div class="meta"&gt;
              &lt;span class="price"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="description"&gt;
              &lt;p&gt;Dit Interactive have experts wordpress ...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="extra"&gt;
              &lt;div class="ui label"&gt;
                Services
              &lt;/div&gt;
              &lt;div class="ui label"&gt;
                For sale
              &lt;/div&gt;
              &lt;div class="ui label"&gt;Central NJ&lt;/div&gt;
              &lt;div class="ui label"&gt;New Jersey&lt;/div&gt;
              &lt;div class="ui right floated primary button"&gt;
                Buy now
                &lt;i class="right chevron icon"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;div class="ui left floated"&gt;
            7 July.
            &lt;br&gt;0:54
          &lt;/div&gt;
          &lt;div class="image"&gt;
            &lt;a href="/vi/5870511561113600.html"&gt;
              &lt;img src="http://lh3.googleusercontent.com/rsfBseoSy-KPg6P703Dknbpd0t2Ug4n2BY8oKkg2XH5dkufstmZXMWSCsHTU4C0yb7bIaMBpAFxILaW6W3lZsiCt=s150" title="Dentist in Westminster" alt="Dentist in Westminster"&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
            &lt;a class="header" href="/vi/5870511561113600.html"&gt;Dentist in Westminster&lt;/a&gt;
            &lt;div class="meta"&gt;
              &lt;span class="price"&gt;&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="description"&gt;
              &lt;p&gt;Pari J. Moazed, DDS is a family dentist ...&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="extra"&gt;
              &lt;div class="ui label"&gt;
                Services
              &lt;/div&gt;
              &lt;div class="ui label"&gt;
                For sale
              &lt;/div&gt;
              &lt;div class="ui label"&gt;Baltimore&lt;/div&gt;
              &lt;div class="ui label"&gt;Maryland&lt;/div&gt;
              &lt;div class="ui right floated primary button"&gt;
                Buy now
                &lt;i class="right chevron icon"&gt;&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
</div>
</div>


This "solution" works, but I don't like it

Code:
&lt;div {% if loop.index0 == 0 %}style="margin-top:10px!important"{%  endif %} class="item"&gt;