Im not understanding why Im having a margin below my image

[mib70]

Hi,

Im having a margin below my image, and Im not understanding why.

I have my example here:http: http://jsfiddle.net/kembwo4j/3/

And as you can see I have a white space (margin) below my image, do you see why I have this space there?

[Alen]

Set the border-bottom: none; like so:

.modal .img {
  width:200px;
  height:220px; 
  float:left;
  margin-right:10px;
  border:5px solid #f3f3f3;
  border-bottom:none;
}

[Alen]

But I would pull it down little bit, like this:

.modal .img {
  width:200px;
  height:220px; 
  float:left;
  margin: 10px 10px 5px 0px;
  border:5px solid #f3f3f3;
  border-bottom:none;
}

[mib70]

Thanks for your answer Alen.

But why I need to give a margin-top to my image to not have white space below it?

Im really not understanding this!

[Alen]

The value is most likely inherited from the browser, meaning the browser decides what the margin should be if it’s not declared.

http://webtypography.net/2.2.2

[mib70]

Ah ok Allen, thanks for the information and help.

One last question, with your code solution, my text goes up and stays a bit above my picture. But if I set a margin-top for my pagraph text, I have again some white space below my image..lol!

Do you see how I can fix this?

[mib70]

Thanks for your answer Soronbe! But I really dont want that white space below my image, you have other idea to fix this?

[Alen]

The issue is not with the margin, like Soronbe said text is really the issue.

Look at the darker orange line it shows the actual margin.

[Vincent_ZA]

Granted there is no bottom margin – adding box-sizing: border-box to the img will solve this

[Author]

Posts