4

I can't remove white space under my images after i added boarder.

How do i get rid of this?

<div style="width: 1200px;">
<div style="float: left; width: 358 px; margin: 0px 7px 0px 0px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_07.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 7px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_04.jpg"}}" alt="" /></div>
<div style="float: left; width: 358 px; margin: 0px 0px 0px 7px; border: 1px solid #021a40;"><img src="{{media url="wysiwyg/3row/3row-no-boarder_09.jpg"}}" alt="" /></div>
<div style="clear: both;">&nbsp;</div>
</div>
</div>
</div>

http://postimg.org/image/5rvgc5h8p/

Fiddle: https://jsfiddle.net/mastervision/zap4smbm/

I use the Magento editor: http://postimg.org/image/c62ljlmoj/

m_schou
  • 113
  • 1
  • 16

5 Answers5

4

Add this

div{
line-height: 0;
}

Fiddle

Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
  • It's a solution to the problem of `display: inline-block` but still I'd rather set the image to `display: block` because if the OP ever made any text-based changes to his image container he'd have quite a hard time finding this line :) – SidOfc Jun 08 '15 at 15:20
  • line-height: 0; did the trick ! Imagefix proof: http://postimg.org/image/tmf8meycf/ **Magento setup**: http://postimg.org/image/b5ktvlie7/ Though as you see in my magento i add the path 3 times, i have a feeling i'm doing it a not so organized way is there a better way to set up me code? – m_schou Jun 08 '15 at 15:34
2

In your floated container, give your images display: block; and width: 100%.

This will cause the image to stretch it's width to it's parents width and if this parent has no height defined it should fit exactly.

If that doesn't work please post a comment under my answer and I'll setup a case for you when I find the time ;)

OFFTOPIC

Oh and ofcourse you'll want to get rid of all that inline CSS. inline css is pure duplication of code and can be solved with external stylesheets.

In such a stylesheet you can style by name basically so you can do this in your stylesheet:

.my-image-box {
    position: relative;
    float: left;
    width: 300px;
    height: auto;
}

.my-image-box img {
    display: block;
    width: 100%;
}

Then in your HTML, after linking your fresh stylesheet you can do this:

<div class="my-image-box">
    <img src="..." />
</div>

This means you don't have all that bulky CSS in your HTML file - making it alot smaller and as an added bonus, when you change something in your stylesheet you'll change it everywhere at the same time :D

IMO that is a double win!

SidOfc
  • 4,552
  • 3
  • 27
  • 50
  • Thanks for good answer. ok, i'll try it out. Though i'm working in Magento (cms system) and i only have a text editor to post into. How would you setup your code when you only have one Magento editor field to work with. http://postimg.org/image/c62ljlmoj/ Ps. This whole code setup have a tendency to confuse me, since i'm not sure what part of the code is influence by the other part of the code.. – m_schou Jun 08 '15 at 15:24
  • Hmmn... Yeah I did notice you used a templating system but just didn't know which one ;) I never worked with magento so I cannot help you there but may I ask you a quick question as well? Because I would want to ask if you are a programmer out of curiousity ;) – SidOfc Jun 08 '15 at 15:28
  • line-height: 0; did the trick ! Imagefix proof: http://postimg.org/image/tmf8meycf/ **Magento setup**: http://postimg.org/image/b5ktvlie7/ Though as you see in my magento i add the path 3 times, i have a feeling i'm doing it a not so organized way is there a better way to set up me code? – m_schou Jun 08 '15 at 15:35
  • No i'm not a pro, thought me questions made that obvious ^^ I try to become one though.. – m_schou Jun 08 '15 at 15:36
  • The way to organize your code as in HTML and CSS is to use external stylesheets. I would say take a step back from PHP and magento / all that stuff since it'll devour you at this level. It's much better to start simple with plain HTML and CSS. Right now as I'm seeing it you're in the first stage of styling with inline css, hence ^.^ – SidOfc Jun 08 '15 at 15:41
  • Oh, and you know how an answer on SO helped you? Remember to use the tick on the left hand side of the answer to mark it as accepted so that this question can be closed and marked as solved ;) – SidOfc Jun 08 '15 at 15:42
  • Ok, yeah i know you can do a separate css sheet when making a website. I'm just forced to work within Magento for now and need to get some basic image and text grids up and running for now.. I try to train all the css html whenever i have freetime.. :) – m_schou Jun 08 '15 at 15:45
  • I actually used Srinivas Pai's hint that fixed it right away.. But it is smarter to user your image box setup? :) Cheers – m_schou Jun 08 '15 at 15:49
  • Not in this case, you could look up HTML5 scoped CSS (https://css-tricks.com/saving-the-day-with-scoped-css/) to possibly do it that way, it's not all clean but it's still better than inline css ;P – SidOfc Jun 09 '15 at 07:56
1

It's because the source of your image is supposedly not the right size or aspect ratio for this size. If you could post a fiddle, I would be able to test this theory. You can fix it by using the object-fit property or using the background property.

DevNebulae
  • 4,566
  • 3
  • 16
  • 27
1

Try img {display: block;}

if images dimensions are right and you are still having white space.

Sir_Faenor
  • 878
  • 6
  • 13
0

One option would be to use the vertical-align property; e.g.

img {
    vertical-align: baseline;
}
focorner
  • 1,927
  • 1
  • 20
  • 24