Guest Stefán Örvarr Sigmundsson Posted August 28, 2008 Share Posted August 28, 2008 How do you get rid of the extra space between an image and the bottom of a div? Consider the following code:<html><body><div style="border: thin dotted black;"><img src="image.gif" alt="Some image." /></div></body></html>There's always some space that I can't seen any logic behind. It's strage that sometimes IE doesn't have this space but the rest always do. Link to comment Share on other sites More sharing options...
jlhaslip Posted August 28, 2008 Share Posted August 28, 2008 Try display:block in the CSS. Link to comment Share on other sites More sharing options...
Kingy Posted August 29, 2008 Share Posted August 29, 2008 For starters make sure you have a proper doctype.I suggest using CSS to get rid of them, try adding this in.<div style="border: thin dotted black; margin:0; padding:0;"> Link to comment Share on other sites More sharing options...
Guest Stefán Örvarr Sigmundsson Posted August 29, 2008 Share Posted August 29, 2008 For starters make sure you have a proper doctype.I suggest using CSS to get rid of them, try adding this in.<div style="border: thin dotted black; margin:0; padding:0;">I do use a proper doctype, I just couldn't be bothered with writing it here. Anyways, it worked jlhaslip. Thanks mate! Link to comment Share on other sites More sharing options...
Kingy Posted August 29, 2008 Share Posted August 29, 2008 Sure no problems just wanted to make sure really and you're welcome. Link to comment Share on other sites More sharing options...
Guest Stefán Örvarr Sigmundsson Posted August 29, 2008 Share Posted August 29, 2008 But I'm wondering. How does display: block; work exactly? Isn't it supposed to add space between elements? Isn't it display: inline; that's supposed to remove space? Link to comment Share on other sites More sharing options...
Jerry62704 Posted August 29, 2008 Share Posted August 29, 2008 How do you get rid of the extra space between an image and the bottom of a div? Consider the following code:<html><body><div style="border: thin dotted black;"><img src="image.gif" alt="Some image." /></div></body></html>There's always some space that I can't seen any logic behind. It's strage that sometimes IE doesn't have this space but the rest always do.jlhaslip was right. The problem is an inline element is designed to line up, well, inline. The "inline" they chose is the base line of the other major inline element - text. Text has to have space below it for descender. By forcing it to be a block object, it will have no descenders and sit on the bottom of the line. Link to comment Share on other sites More sharing options...
Ingolme Posted August 29, 2008 Share Posted August 29, 2008 You can give it the vertical-align property if you don't want it displayed as a block element. img {vertical-align: bottom;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.