strange offset on images displayed inline-block

Question

I need to have some images displayed inline block but after the first image there's a strage offset that I can't remove, can someone explain why the images has this behaviour?

here's the demo: http://jsfiddle.net/czssvg3p/2/

<div class="finitures">
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
     <div class="finiture-img">
          <img src="http://placehold.it/68x50/990000/fff"></img>
     </div>
</div>

css:

    .finiture-img
{
    display:inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align:top;
    margin-right:10px;
    width:15%;
    overflow:hidden;
    clear:both;
}

.finiture-img img
{
    border: 1px solid #898886; 
    margin-top:2px; 
    cursor:pointer;
    width:100%;
    overflow:hidden;
}

.finitures {
    margin: 0;
    border-bottom: 1px solid #9c9b9b;
    padding-bottom: 20px;
    width:100%;
    margin-top:100px;
    clear:both;
    overflow:hidden;
}

.finitures:last-child
{
    border-bottom: none;
}

Answer 1

You're not closing the <div class="finitures"> element correctly (in your provided snippet, at least). So adding a closing </div> will fix your issue, removing this quirky behaviour. (only some browsers will try to interpret unclosed tags)

You're missing a closing </div> tag at the end of your snippet, leading to unexpected behaviour.

Since 'tidying up' fixed this issue, you can be almost certain it's an error in your html rather than css:

Just make sure with every opening tag you have a corresponding closing tag. This may be in the form of </elementName> (or /> if it is a self closing element i.e. image).

A good way to ensure that you don't do this, and also improve readability, is to correctly indent and layout your html (and css for that matter). This will further allow you to modify your markup if desired further down the line.

I would also like to point out that the layout of your html is also important. For example, placing elements next to each other may render them differently than placing them one under the other.

See here, where I'm using the exactly the same markup, but one i've placed on a new line. See how they appear/render differently?

* {
  margin: 0;
  padding: 0;
}
div {
  display: inline-block;
  width: 50%;
  background: blue;
}
input {
  width: 50%;
  display: inline-block;
}

.now {
  width: 49.5%;
}

<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />

<br/><br/><br/>
<div class="now">Div on left</div>
<input class="now" type="text" placeholder="text here" />

---

As a side Note you don't need the clear:both; css property unless you are floating your elements (personally i don't like floating elements, it can get too messy). Most functionality can be achieved from using positioning instead, which seems to be a much better option IMHO.