Border Adds Padding At Bottom of Images

[MBM]

When I add a border to my image class I get padding at the bottom of the image (the images below the slider):

.imgrow1 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 10px;
border:1px solid #333333;
}

This is with the border :


Larger size :

http://mbmitservices.co.uk/pcommerce/image_padding_border_001.png

And without :


How do I remove the padding but retain the border? I’ve played around with the padding.

[Xordan]

Padding at the bottom of your is normal. Image are displayed inline by default. Just add a “display:block; ” rule in your css.

[wolfcry911]

I’ll take a stab, but in the future it would be beneficial to supply at least some code if not a link to a pen or the page in question.

I’m guessing you’re putting the border on the image’s container. The space below the image is reserved for font descenders because images are inline by default. So you could either set the image to display: block; or vertical-align: bottom. Either should work.

[MBM]

@wolfcry911

div.row1 {margin-left:290px;}
div.row2 {margin-left:290px;}

.imgrow1 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 10px;
border:1px solid #333333;
display:block;
}

.imgrow2 {
font-size: 16px;
float: left;
color: #ffffff;
margin:10px 10px 10px 25px;
border:1px solid #333333;
display:block;
}

Live here :

http://mbmitservices.co.uk/pcommerce/index.html

@Xordan

I added display:block; but it didn’t work.

[wolfcry911]

the _image_ is inline by default, you need to target the _image_ and change it to block, or vertical-align: bottom;

.imgrow1 img {
display: block;
}

and why two different classes with the same exact styling?

[MBM]

@wolfcry911

Thanks. It worked :

.imgrow1 img { display: block;}
.imgrow2 img { display: block;}

> and why two different classes with the same exact styling?

imgrow2 has different padding. I couldn’t get it to align correctly with one class.

[wolfcry911]

its bad practice to have so much repetition for just a single margin. Your html looks to be malformed as well. And you have extraneous div elements. It could be as simple as this:

or

you really don’t need the divs (or the figures, but they’re understandable).

[MBM]

@wolfcry911 I have divs to align captions and images. I have added Chris’ slide in captions and cannot get the images to align without the divs :

The green and pleasant lands of the Shire in Eriador – just West of the Brandywine River and East of the Far Downs.

The green and pleasant lands of the Shire in Eriador – just West of the Brandywine River and East of the Far Downs.

div.row1 {margin-left:260px;position:absolute;}
div.row2 {margin-left:520px;position:absolute;}

If there’s a cleaner way let me know!

[wolfcry911]

It seems strange to have .row2 inside of .row1 – its seems stranger to name them rows seeing that they’re two columns in one row. The absolute positioning is going to wreak havoc if you try to add any more content.

Here’s a pen I created awhile back
http://codepen.io/wolfcry911/pen/CoJqH

[MBM]

Thanks but the reason for the absolute positioning was because I couldn’t get the images to align with the slider. If I increase the right margin below just one pixel the second image drops to the next line.

figure {
left:40px;
float: left;
position: relative;
overflow: hidden;
margin-right:33px;
}

![alignment] (http://mbmitservices.co.uk/pcommerce/alignment.png)

[MBM]

Fixed. One of the images was causing a conflict so I placed it inside the footer.

[Author]

Posts