Why the bottom margin does not work?

Get Started
1

I have given margin-bottom:10px; …but still the TEXT’s are at the top . I was expecting them to be 10px above from the bottom. why the bottom-margin is not working ?


<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
 fieldset {
  height:200px;
  border:1px solid blue;

  }
label {
  float:left;
  width:15%;
  font-weight:bold;


  [COLOR="Red"]margin-bottom:10px;[/COLOR]
  border:1px solid red;
  }
  </style>
 </HEAD>

 <BODY>
  <fieldset>
  <label>ABC</label>
  <label>DEF</label>
  <label>IJK</label>
  <label>MNO</label>
  </fieldset>
 </BODY>
</HTML>
2

Sound to me like you meant to use margin-top instead of margin-bottom :slight_smile:

3

Instead of putting margin-top with a high value , I am putting margin-bottom with less value …is not it the same thing ?

4

No. margin-top puts extra space at the top of an element, and margin-bottom puts extra space at the bottom of the elements, as their names suggest :slight_smile:

Also, labels are inline elements by default so margins won’t be rendered for them unless you also add display:block to it’s CSS rules.

5

I did not add display:block but margin still works for inline label elements now!


<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
 fieldset {
  height:200px;
  border:1px solid blue;
 
  }
label {
  float:left;
  width:15%;
  font-weight:bold;
  margin-top:200px;
  border:1px solid red;
  }
  </style>
 </HEAD>

 <BODY>
  <fieldset>
  <label>ABC</label>
  <label>DEF</label>
  <label>IJK</label>
  <label>MNO</label>
  </fieldset>
 </BODY>
</HTML>
6

float: left implies display: block (for all intents and purposes), so that explains it :slight_smile:

7

getting confused. Here is the confusion ..

float: left shifts to left only . the element does not start from new line right away as a display:block do.

For example, if we add two <p> they are display:block ..because they start in new line right away.

but if we add two <img> inline element with float:left , they just come side by side …they don’t start in new lines , so how come they become a display:block when using float:left ?

8

Well, elements with float: left do become block level elements, but they are shrink wrapped, which normal block elements are not.
Take a look at this for more info: http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

:slight_smile:

9

what is it ? what does this wording means “shrink wrapped” ?

10

Given a width such that the contents fits in it exactly. Images have an intrinsic with so the width of the floated element will be the same as the width of the image in it. For all other contents (like text) you have to supply a width yourself to avoid unexpected results (as is said in the article I linked earlier) :slight_smile: