CODEWITHSUNDEEP
csshtml
Sinnbeck
Sinnbeck

Reputation: 677

Image moving down inside of div

I am trying to create some divs to hold a bunch of images. Just to test I only put in 1 image for now. My problem is that it moves down 3 pixels. As far as I can tell it is because I have a 3 pixel margin on the container div, but I dont understand why is has any influence on the image. I have tried to set the following for the image but nothing seems to work.

padding:0;
margin:0;
border:0;
line-height:0;

http://testdummies.dk/8pane/glue.php

<div class="box small">
   <img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Noah_Webster_200x200.jpg">
</div>

.box {
    background-color: #B9C4F4;
    border-radius: 3px;
    display: inline-block;
    margin: 3px;
}

I have been pulling hairs for several hours trying to figure this out but haven't gotten anywhere.

Any help is greatly appriciated!

Resin

Upvotes: 0

Views: 4453

Answers (1)

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

This happening because of positioning inline element (img) inside inline-block;

  1. Apply display:block; for image. OR
  2. Set your .box {display: block; float: left; }

Upvotes: 7

Related Questions