Is margin possible for a <div> in css?

Question

Is it possible to define a margin for a text area?

my wysiwyg editor places my text within <div> tags in stead of giving linebreaks <br />

So i thought giving the <div> a margin?

Is this possible in css? and if yes how?

Many thanks.

EDIT: I can't define the divs because it gets no classes. For example the editor makes it:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas lacus libero, et pellentesque nisl. Cras pharetra nunc sit amet urna vestibulum non ultricies metus malesuada. </div>
<div>Nulla tincidunt, neque at blandit ultrices, massa odio pulvinar est, vel accumsan sapien justo sit amet lorem.</div>

This looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas lacus libero, et pellentesque nisl. Cras pharetra nunc sit amet urna vestibulum non ultricies metus malesuada.
Nulla tincidunt, neque at blandit ultrices, massa odio pulvinar est, vel accumsan sapien justo sit amet lorem.

But needs to be like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas lacus libero, et pellentesque nisl. Cras pharetra nunc sit amet urna vestibulum non ultricies metus malesuada.

Nulla tincidunt, neque at blandit ultrices, massa odio pulvinar est, vel accumsan sapien justo sit amet lorem.

Answer 1

You can change the margins of all <div>s in a container by writing

.MyContainer div {
    margin: 42px;
}

Answer 2

like:

div.myDiv{
  margin: 10px 0px 5px 20px;
}

gives you: 10 pixel margin at top, 0 pixel margin to right, 5 pixel margin at bottom and 20 pixel margin to left.

Answer 3

<div style="margin:5px;">content</div>

... will put a 5 pixel margin on the div.

Answer 4

<p> already has a 1em margin on top and bottom by default. I usually use <p>test</p> to put line breaks on text instead of <br />

You can put a 1em top & bottom margin on all your divs in a separate .css file like so:

div{
  margin:1em 0; /* 1em top & bottom; 0em sides */
}

You wouldn't want to use inline CSS as someone suggested:

<div style="margin:1em 0;">text</div>

because you are using a WYSIWYG which doesn't put that in automatically. Plus, you have to have the extra style="" attribute on all your divs.

One interesting concept to note is that margins collapse vertically, but not horizontally. What that means is that if you have a 1em margin on the top & bottom, you don't end up with a 2em margin between your paragraphs. You get the more desirable 1em margin instead.

W3C CSS specification: Box model

In CSS 2.1, horizontal margins never collapse.

Vertical margins may collapse between certain boxes:

• Two or more adjoining vertical margins of block boxes in the normal flow collapse