Grow your CSS skills. Land your dream job.

[Solved] Specifying pace between paragraphs and images

  • # June 12, 2010 at 2:17 am

    What is the best way to specify the return (vertical space) between images and paragraphs contained within the same div? I know how to specify space between entire blocks of divs, but this is a bit different.

    Code:

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum ligula vel lacus suscipit molestie. Mauris eu quam consequat elit imperdiet ullamcorper quis et dolor.

    continue to ABOUT

    For instance, I want the space between the IMAGE1.png and IMAGE2.png to have a vertical space 18px between eachother. And I also want the space between IMAGE2.png to have a vertical space of 18px between it and the paragraph of text that follows it.

    I tried creating a type selector rule by defining the line height of <p>, but that made the lines of text double-spaced when I only wanted to define the space AFTER and BEFORE a paragraph begins (same with images). Nevermind that I feel weird about scattering a bunch of <p> tags around images. There must be a better way to do this…

    # June 12, 2010 at 2:24 am
    Code:
    #who img,
    #who p {
    margin:0 0 18px 0;
    }
    # June 12, 2010 at 10:56 am

    I agree with noahgelman. The reasoning is something you should probably get a good understanding of.

    Inside your #who div, the <img>’s are inline, but the <p>’s are block elements. The <img>’s appear like blocks because you have put them on separate lines in your HTML (Someone correct me if that is wrong :) ).

    Both <img> and <p> can have the margin and padding attributes – there is a difference in these but you’ll need to read up on your own to learn about it. Suffice it to say, for spacing between elements, you’ll want to put a ‘margin’ (or space) that you define in your css to indicate that. noahgelman’s code only puts the space at the bottom but you could also split the space between the top and bottom like this if you wanted – it depends on your layout needs:

    Code:
    #who img,
    #who p {
    margin: 9px 0;
    }
    # June 13, 2010 at 1:26 am

    Thanks done, I forgot about being able to apply the same margin rules to tags WITHIN divs.

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

You must be logged in to reply to this topic.

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