Grow your CSS skills. Land your dream job.

BLOGGER – Add black frame around photo AND remove margin under photo

  • # February 12, 2013 at 1:15 pm

    I really appreciate the help. How can I add a thin black border around IMG tag and also, how can I remove the margin that’s under a photo?

    Here’s HTML:

    <a style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" imageanchor="1" href="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg"><img width="320" height="218" border="0" src="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg"></a>Check out this Pen!

    Here’s CSS:

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }
    Check out this Pen!

    THANK YOU SO MUCH!!!

    # February 12, 2013 at 1:16 pm

    I realize that all I need to do is remove the ‘MARGIN-BOTTOM’ from the CSS and that will remove the margin, HOWEVER, when I go into the HTML/CSS for my blogger, ‘ELEMENT.STYLE’ is not able to be found.

    # February 12, 2013 at 1:22 pm

    @hendrix940, when you see ‘element.style’ in the inspector, it means it’s an inline style, which means either a) editing the html itself, or b) editing the javascript that’s creating that inline style…

    OR add `margin: 0 !important` to your css to override the inline style.

    The border is `border: 1px solid black` so…to add to an img tag it would be:

    img {
    border: 1px solid black;
    }

    # February 12, 2013 at 1:32 pm

    Awesome! Thank you @chrisp I very much appreciate your explanation sir!!

    # February 12, 2013 at 1:36 pm

    @chrisp , so if I wanted to remove a margin-bottom attribute

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }
    Check out this Pen!

    # February 12, 2013 at 1:37 pm

    on only the IMG tags … then, I would write it like this:

    img {
    border: 1px solid black;
    margin-bottom: 0em;
    }
    Check out this Pen!

    # February 12, 2013 at 1:37 pm

    correct? THANK YOU SO MUCH!!

    # February 12, 2013 at 1:40 pm

    @hendrix940, no, don’t put `element.style` in your css, as it’s not really calling anything..what you need to do is find out what ID or class that element is using, and override it **through that class or ID**. For example, if you have a div with class of `main-div` and in the inspector tool you see

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }

    for div.main-div, you need to put in your CSS:

    .main-div {
    margin: 0 !important;
    }

    that way, the margin in your CSS will override the inline style of `margin-bottom: 1em;` that you see in ‘element.style’

    Does that make sense?

    # February 12, 2013 at 2:01 pm

    Okay, yes I think I understand. I’m trying it out right now sir.

    # February 12, 2013 at 2:17 pm

    @chrisp , I’m doing something wrong. Here’s the HTML:

    <div class="separator" style="clear: both; text-align: center;">
    <a style="clear: right; float: right; margin-left: 1em; margin-bottom: 1em;" imageanchor="1" href="http://simeonhendrix.com/images/boogeyman-poster-movie.jpg">
    </div>
    Check out this Pen!

    And this is the CSS that blogger automatically is generating. You’ll also notice I tried to implement your instructions but it didn’t remove the margin-bottom.

    element.style {
    clear: right;
    float: right;
    margin-bottom: 1em;
    margin-left: 1em;
    }

    The above code is what blogger is automatically generating for me.

    I tried:

    .separator {
    margin-bottom: 0 !important;
    }

    But this doesn't remove the 'margin-bottom'
    Check out this Pen!

    # February 12, 2013 at 2:29 pm

    Furthermore, when I got into the HTML/CSS of the blogger, I can’t edit and modify ‘ELEMENT.STYLE’

    # February 12, 2013 at 3:08 pm

    @hendrix, you _almost_ have it.. `.separator` has no margin-bottom, but the child `a` does, so it should look like this:

    .separator a {
    margin-bottom: 0 !important;
    }

    # February 12, 2013 at 4:21 pm

    AH!! Thanks so much dude!!

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

You must be logged in to reply to this topic.

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