float property ignores margin

Question

I am learning semantic-ui framework and currently I'm using segments. My code looks like this:

<!DOCTYPE html>
<html>
<head>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<link rel="stylesheet"
    href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script
    src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>Assignments</title>
<style>
    .raised.segment{
        margin: 1.5%;
        width: 30%;
        display: inline-block;
        float: left;
    }
    h3 {
        display: inline-block;
        text-align: center;
    }
</style>
</head>
<body>


 <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>

  <div class="ui raised segment">
<h2 class="ui header">
  Section 6
</h2>
 <div class="ui middle aligned selection list">
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/helen.jpg">
    <div class="content">
      <h3 class="ui header"> Vasil Pkhakadze </h3>
    </div>
  </div>
  <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
   <div class="item">
    <img class="ui avatar image" src="/images/avatar/small/christian.jpg">
    <div class="content">
      <div class="header">George Cercvadze</div>
    </div>
  </div>
</div>
 </div>
</body>
</html>

Everything is fine except the first segment. float:left property ignores its margin and so the first segment is touching the borders. Other segments are fine. Any suggestions ?

This might help https://stackoverflow.com/questions/1883414/why-top-margin-of-html-element-is-ignored-after-floated-element — Sudarsh, Jul 09 '17 at 08:11
@Sudarsh I have read it but i think it's very forceful way to make the first segment wrapped and others not. There should be other natural way to do it. — CerushDope, Jul 09 '17 at 08:15

score 0 · Accepted Answer · answered Jul 09 '17 at 08:20

Class with .ui.segment:first-child{margin-top: 0;} in semantic.min.css

have margin-top:0; thus making it to touch borders, override it with custom css

add important tag to this rule

CSS

.raised.segment{
        margin: 1.5% !important;
        width: 30%;
        display: inline-block;
        float: left;
    }

everything should work fine

Link For reference

hope this helps..

float property ignores margin

1 Answers1