After <div> tags how do I make space?

After <div class=“container1”>TEXT</div> tags, how can I make space under it rather than </br></br></br></br> etc?

Thanks

Change the stylesheet so that .container1 has a padding-bottom or margin-bottom. Alternatively add the style to the tag. For example:
<div class=“container1” style=“margin-bottom: 3em;”>

Just as a side note, you probably want to enclose your text within paragraph elements, that could be why your not getting spacing if your just dumping all your text and using br’s with no wrapping (apart from div) around them, div is not a suitable element for text on it’s own as it has no inherent semantic value. :slight_smile:

Using ems is not good practice, ems are a relative size not a defined size. In other words that space on one computer could be completely different on another.

I would just use margin-bottom:15px;

Using px i9s probably even less appropriate than using ems. At least with ems the space remains proportional to the text whereas 15px is a gap of several lines when 1em is only 5px and is an almost non-existant space if 1em = 100px.

I didn’t mean 15px as literal they could put whatever they want. Also 1 em is not 5px, 1em is equal to the current font size. If the user has a different default font or font size the space would be completely different.

I always use relative rather than absolute sizes, as felgall says they maintain the proportions. A gap of 5px might look right at 12pt but be too big at 8pt and too small at 18pt. Relative sizes are recommended by the Web Accessiblity Guildlines (WAI) partly because they adapt to display on other devices better.

I agree with AlexDawson that appropriate mark up should be used, again this is something encourage by WAI. A paragraph tag, <p>, would seem to be more appropriate in this case.

There is a behaviour in browsers which I believe is called “margin collapsing”, where if one paragraph has a bottom margin and the next paragraph has a top margin then the gap between them becomes the larger of the two margin. I wonder if this might be ChrisjChrisj’s problem.

I always use em’s when possible, but when your in a tight space (maybe a defined area in the design) I use pixels so that I can count on differences in browsers not breaking my layout.


<div class="section">
    <h2>News</h2>
    <p>....</p>
</div>
.section { margin: 0 0 1em }

http://www.w3.org/TR/CSS2/box.html

I agree with alex, you could enclose them on paragraphs so they could have line spaces after each paragraph. You could also use “ .class-name {line-height:2em}” so that when you use it “<dic class=”class-name”>something in here</div>” it would leave a space after it.