SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question 2 IMGs need to be separated (one on top of the other) with a 35px-MARGIN between them

    I can't remember if I have to put an IMG into a separate DIV (or TABLE) to force two IMGs onto their own lines vertically (to stack, in other words). I've tried adding
    HTML Code:
    <img style="margin-top: 35PX; BORDER: 4PX DASHED BLACK;" src="http
    to the second IMG but the two are still on the same line. Did I have to float this? What's the simplest way to add a TOP MARGIN (not padding) to an IMG? Thanks guys!

    s

  2. #2
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    <br> ?? that seems so primitive!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    What about

    Code:
    img {display: block;}
    That often works, but not in all contexts.

  4. #4
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well I finally just fell back on my old tried-n-true DIV
    HTML Code:
    <div style="margin-top: 35PX;">
    It works; I'm just not sure that I couldn't have done this within the IMG tag itself.

    s

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Maybe:
    Code:
    img {
        display:block;
        margin-top:35px;
    }
    or
    Code:
    img {display:block;}
    img + img {margin-top:35px;}

  6. #6
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So . . . Ronpat and Ralph, how would you recommend a "TOP 35px" class that would globally work for
    • TABLES
    • IMAGES
    • DIVs



  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    A class implies properties that are selectively applied. Your question is a bit too vague to answer "globally". Are you asking how to apply a margin-top to all tables, images, and divs? or are you asking for a class that can be selectively applied to any table, image and/or div?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by semicolon View Post
    So . . . Ronpat and Ralph, how would you recommend a "TOP 35px" class that would globally work for
    • TABLES
    • IMAGES
    • DIVs


    You can't really make blanket assumptions like that as margins collapse or will at least depend on the margin of the element above also.

    If the element above has a greater margin that 35px then the gap will be greater than 35px or if the element above has a negative bottom margin the gap will be less.

    If the elements are floated then the margins won't collapse and you get double the margin you thought as margins on floats don't collapse.

    If the elements are nested then the margin will collapse onto the outer element if there is no content, borders or padding between them.

    If you apply a 35px top margin to an element it will have no affect if the element above it is a float.

    Vertical margins on inline elements are ignored.

    So as you can see you can't really have a one size fits all rule as it all depends on context. If you are just talking about static non floated, non positioned divs then just adding a margin-bottom is fine but at some point you will run into one or other of the scenarios mentioned above and have code more specifically to the task in hand.

    It is unlikely that you would want all divs, images and tables to have the same margin. However you may want to set a default for elements like paragraphs and headings. (e.g. p{margin:0 0 1em})

  9. #9
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    A class implies properties that are selectively applied. Your question is a bit too vague to answer "globally". Are you asking how to apply a margin-top to all tables, images, and divs? or are you asking for a class that can be selectively applied to any table, image and/or div?
    Selectively applied. Thanks RonPat.

    s

  10. #10
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    69
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry to be so confusing!! Just ignore that "globally" stuff above. Selectively is actually what I'm after.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Just add a class to the 2 images concerned and then set the image to display:block and add the top margin you need.

    Code:
    .gap{
    display:block;
    margin:35px 0 0;
    }
    Of course it depends on what other more specific rules you may have in place as the above may get over-written by rules with more weight.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •