margin:1em;
margin-left:2em;
margin-right:20px;
margin-top:10px;
margin-bottom:4em;
Margin also affects the area of a box or inline element, but this time outside of the border (visible or not).
Effect: This will keep the element away from other elements. Margin does not affect the size of the border, but it does affect the space that the element takes up in the page.
(Style in bold)
<div style="
border:solid red 2px; ">
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
<div style="
border:solid blue 2px; ">
This is the second div element.
</div>
<img alt="sample pic" src="../JEH/Animals/Spinne-transparent-small.png" style="
border:solid blue 2px; " />
</div>
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
This is the second div element.
If I want space around the elements I have two options: I can do it with padding:
(Style in bold)
<div style="
border:solid red 2px; padding:1em; ">
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
<div style="
border:solid blue 2px; padding:1em; ">
This is the second div element.
</div>
<img alt="sample pic" src="../JEH/Animals/Spinne-transparent-small.png" style="
border:solid blue 2px; padding:1em; " />
</div>
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
This is the second div element.
But that will still keep the borders touching each other. If I don't want that, I will need margin:
(Style in bold)
<div style="
border:solid red 2px; margin:1em; ">
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
<div style="
border:solid blue 2px; margin:1em; ">
This is the second div element.
</div>
<img alt="sample pic" src="../JEH/Animals/Spinne-transparent-small.png" style="
border:solid blue 2px; margin:1em; " />
</div>
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
This is the second div element.
Certainly I can also have padding and margin on the same elements, just as I can always use more than
just one property!
(Style in bold)
<div style="
border:solid red 2px; margin:1em; padding:1em; ">
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
<div style="
border:solid blue 2px; margin:1em; padding:1em; ">
This is the second div element.
</div>
<img alt="sample pic" src="../JEH/Animals/Spinne-transparent-small.png" style="
border:solid blue 2px; margin:1em; padding:1em; " />
</div>
This is a div with some text in it, and a border of two pixels width. Inside of this div sits another div and an image.
This is the second div element.
Hint:
Never forget that padding and margin add to the space an element takes up! If you want to put two 50% wide
elements next to each other, on a page, without getting a scrollbar or the elements breaking up into more than one line,
that's fine, but if you add now padding or margin (or even border, that adds to the dimensions of the
element too, the border is around the space the element takes up, too), then the elements
are wider than 50% and won't fit without forcing a new line or scrollbars (depends).
Hi, I am a block element, and 50% of the frame wide.
Hi, I am a block element, and 50% of the frame wide.
Those two elements fit next to each other. The next two don't:
Hi, I am a block element, and 50% of the frame wide. But I also have a margin of 20px.
Hi, I am a block element, and 50% of the frame wide. But I also have a margin of 20px.
those two won't either:
Hi, I am a block element, and 50% of the frame wide.
Hi, I am a block element, and 50% of the frame wide. But I also have a padding of 10px.
and now, no padding, no margin, anywhere (but borders):
Hi, I am a block element, and 50% of the frame wide. And I have a red border.
Hi, I am a block element, and 50% of the frame wide. And I have a neat border of 2 pixels width.
Mainpage
