Thread

What’s the correct CSS to increase the vertical space between two elements?

For example, say a comment contains this:

<div id="comment-container">line one
line two</div>

...what’s the correct CSS to increase the vertical space between line one and line two?

Thanks in advance for the info.

I usually apply margin-top to textual elements. So

p {margin: 1em 0 0 0;}

I usually apply margin-top to textual elements. So

p {margin: 1em 0 0 0;}

margin-top:1.5em;
Etc. would also work if you aren’t familiar with CSS shorthand properties.

I tried adding this to my CSS:

#comments-container p
    {
        margin-top:1.5em;
    }

...but it seemed to have no effect. Here’s the markup:

<div id="comment_content">
    <div class="comments-container">
        Line 1
        
        
        Line 2
        
        Line 3
        
        Line 4
            
    </div>
</div>

What am I missing?

You’ve confused using ID and class.
In the Div your showing ID so the # would be correct.
To use class the css would be preceeded with a dot.
.comments-container p
  {
margin-top:1.5em;
}

You have got extra tags in there… here’s the corrected code…

<div id="comment_content">
  <div class="comments-container">
    Line 1
    Line 2
    Line 3
    Line 4    
    </div>
</div>

I’d suggest making the top margin as zero and defining a bottom margin…

.comments-container p {
margin: 0 0 1em 0;
}

Is the inner div necessary, it’s kind of looking like something that should be handled with a list semantically, if the text isn’t actual paragraphs?

Thanks very much for the help.  I see I have one more anomaly than I thought, on top of the ones you’ve helped me correct - TinyMCE isn’t inserting tags where I thought it would - instead it’s just using
tags.