White space below the image
I am unable to remove the space under my images after adding a border.
How can 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;"> </div>
</div>
</div>
</div>
http://postimg.org/image/5rvgc5h8p/
Fiddle: https://jsfiddle.net/mastervision/zap4smbm/
I am using Magento editor: http://postimg.org/image/c62ljlmoj/
source to share
In your floated container, give images display: block;
and width: 100%
.
This will cause the image to stretch its width to the width of the parents and if that parent doesn't have a specific height, it must fit exactly.
If that doesn't work, please post a comment on my answer and I'll set a case for you when I find the time;)
OFFTOPIC
Oh, of course you want to get rid of all that inline CSS. inline css is pure code duplication and can be solved with external stylesheets .
In a style sheet like this, you can style by name, so you can do it in your style sheet:
.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 to the new 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, which makes it a lot smaller and as an added bonus, when you change something in your stylesheet, you'll change it all over the place at the same time: D
IMO - a double win!
source to share