html - inline-block img elemets have a gap when start a new line? -


when display img inline-block.but there gap between first line , second !! below sample, picture1 , picture3 have gap?i dont't want gap..so me..

img {    display:inline-block;    width:200px;    background-color:#ccc;    border:5px solid red;    padding:10px;    text-align:center;    margin:0px;  }
<img alt="picture1"/><img alt="picture2"/><img alt="picture3"/><img alt="picture4"/>

images make gap default, can fix using vertical-align

img {     display: inline-block;     width: 200px;     background-color: #ccc;     border: 5px solid red;     padding: 10px;     text-align: center;     margin: 0px;     vertical-align: middle; } 

http://jsfiddle.net/opz672zn/


Comments

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

delphi - Indy UDP Read Contents of Adata -

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -