Grow your CSS skills. Land your dream job.

Border Adds Padding At Bottom of Images

  • MBM
    # May 10, 2013 at 9:20 pm

    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 :

    ![With Border](http://mbmitservices.co.uk/pcommerce/image_padding_border_001.png)

    Larger size :

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

    And without :

    ![With Border](http://mbmitservices.co.uk/pcommerce/image_padding_border_002.png)

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

    # May 10, 2013 at 9:39 pm

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

    # May 10, 2013 at 9:39 pm

    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
    # May 10, 2013 at 9:48 pm

    @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;
    }

    shoes

    shoes

    Live here :

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

    @Xordan

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

    # May 10, 2013 at 9:52 pm

    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
    # May 10, 2013 at 10:02 pm

    @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.

    # May 10, 2013 at 10:24 pm

    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:

    shoes
    shoes

    or

    shoes

    shoes

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

    MBM
    # May 11, 2013 at 11:18 am

    @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!

    # May 11, 2013 at 1:41 pm

    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
    # May 11, 2013 at 3:05 pm

    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
    # May 12, 2013 at 7:35 am

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".