why there are top margin and bottom margin both in CSS ?
Is not one is enough ? Is not one can vary top margin pixels to put the element up and down . why do we then need bottom margin ?
I’m confused with this concept. Please comment
Because you may want to put a comprehensive distance around an element in a container, and there may not be a following element to mark off of - for example to give the footer of a page a margin from the bottom of the browser window for whitespace sake.
Or to give more finite control over text wrapping around a floated image in a body of text - you may decide you want 10px on the top and left, but 20px at the bottom to allow more whitespace to make a caption easier to read.
not yet clear.
>>>for example to give the footer of a page a margin from the bottom of the browser window for whitespace sake.
we can use either bottom or top margin here …is not it ? If we use top margin then we need to put a HIGH pixel value but If we use bottom margin then we need to put a LOW pixel value . So, either one of these can be used . We don’t need them both then . Where is the problem here ?
>>>to give more finite control over text wrapping around a floated image in a body of text
not able to understand the scenario.
>>text wrapping around a floated image
how this looks ? Not sure about this example.
Depends on the approach you want to take. If you want a variable height footer for some odd reason, or if you want a sticky footer. then using the bottom margin anchor makes sense.
OK, see the attached image and see if that makes sense to you…look at the margin to the left of the image, then look at the one to the bottom. It’s a rough image (I had to do it in paint since my main machine decided to take Friday off), but that image would be floated right with a fixed margin-bottom to enable the larger space to see the caption.
thanks for your time .
>>>that image would be floated right with a fixed margin-bottom to enable the larger space to see the caption.
but this margin-bottom is from the bottom of the container …is not it ? this margin is not from the text ‘caption goes here’ .
Are you trying to say that in this case top margin will fail to achieve the look you posted ?
Is the same thing can not be achieved using top margin ?
I’m not yet clear when top margin will be helpful and when bottom margin will be helpful.
The example was oversimplified - I would have put the image in a div which also included the caption text. The margins would have been applied to a div.
Here’s the SP css reference for margins and it explains it pretty well. Margins aren’t for positioning per se. They are used to define the amount of whitespace given in the appropriate direction.
So if you apply a top-margin, yes it pushes the element down, but in reality, what you’re doing is increasing the amount of whitespace above the element, not changing the element itself.
I’m trying to come up with a real-life correlation to try and help you visualize it but nothing good is coming to me at the moment. 
Thanks . you are very much helpful.
I would like to put a text label in a table cell and then I want to place a textbox JUSTbelow the text label using CSS controls…
I’m not sure how to do this in CSS. Do we need here margin or padding or both ?
As we have the element <td> contains another element i.e a textbox …so my guess is we need to use margin . but do we also need padding here ?
Could you please post me a sample code to see how to put a text label in a table cell and then to place a textbox JUSTbelow the text label using CSS controls.
why bottom margin exists?
imagine this: a circle of people holding hands.
now imagine this: a bunch of people trying to form a holding hands circle, each using only the left hand.
imagine this: a bunch of people doing a conga line.
now imagine this: a circle of people holding hands trying to do a conga line.
one for me, one for you.
why bottom margin should continue existing?
imagine this: removing all your airbags.
now imagine this: after removing your airbags you find out “the hospital way” that you may need them.
what’s the logic of bottom margin existing?
imagine this: x-y axis graph for the sine wave.
now imagine this: x-y axis graph for the sine wave with only the top half.
why certain things are the way they are? because you may need them. how come? others needed them before you. will you ever need them? that doesn’t stop those things from being useful to others.
you want to split the hair in four? come up with examples.
like this: when you hang a picture on the wall, you use top or bottom margin for it. you don’t use the top margin for the picture and the top margin for the floor to decide where the picture should hang.
Hi,
Padding is the space inside the element and margin is the space outside the element.
Sometimes you can use either to make room if there are no backgrounds and borders to take note of but they both do different things. Margins will also collapse unlike padding which never collapses.
The easiest way to see what they do is to play around with them and look at the results. Here are few simple demos that you only have to look at to see what difference margin top and bottom and padding can make.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.wrapper {
border:1px solid red;
background:#fffccc;
margin: 0 0 20px;
width:200px;
padding:0 10px;
}
p {
background:cyan;
border-top:1px dotted #000;
border-bottom:1px dotted #000;
}
.first p {margin:10px 0 0}
.second p {margin:0 0 10px}
.fourth p {
margin:0;
padding:10px 0 0
}
.fifth p {
margin:0;
padding:0 0 10px
}
.sixth p{
margin:0;
padding:10px 0;
}
</style>
</head>
<body>
<div class="wrapper first">
<p>Top margin only</p>
<p>Top margin only</p>
</div>
<div class="wrapper second">
<p class="first">Bottom margin only</p>
<p class="second">Bottom margin only</p>
</div>
<div class="wrapper third">
<p class="first">Top and bottom margin</p>
<p class="second">Top and bottom margin</p>
</div>
<div class="wrapper fourth">
<p class="first">Top padding only</p>
<p class="second">Top padding only</p>
</div>
<div class="wrapper fifth">
<p class="first">Bottom Padding only</p>
<p class="second">Bottom Padding only</p>
</div>
<div class="wrapper sixth">
<p class="first">Top and bottom padding</p>
<p class="second">Top and bottom padding</p>
</div>
</body>
</html>
You can quite often just use bottom margins but that won’t help make space above the very first item on the page. On the other hand you could just use top margins but then you couldn’t get the first item flush to the top.
They both have their uses in the right place at the right time and the reason they are needed as others have already said above.
One thing you need to know is that inline elements don’t have top/bottom margins.
A label is normally inline, so setting top or bottom margin on it should show you no result. A textarea is often inline-block in browsers so top/bottom margin may work.
You will probably want to make the label a block with display: block so that the textarea is forced to stay underneath the label. In fact, this is how I do my new forms where the label is above the input instead of next to it. Since setting the label to “block” makes it take up the whole row of space, you don’t necessarily need margins.
td label {
display: block;
}
<td>
<label for=“foo”>Foo:</label>
<textarea id=“foo” name=“footext” rows=“10” cols=“10”></textarea>
</td>
I dunno, something like that, though I don’t use tables in my forms 99% of the time. Tables are usually just extra markup for no good reason in forms.