CODEWITHSUNDEEP
htmlcss
Naveen Ernesto
Naveen Ernesto

Reputation: 11

extra margin space in div

I'm just starting out with HTML & CSS. In the snippet below I am trying to add a div. In chrome there are extra margins which takes up the entire width of the page, which I don't want. I tried making it 0, but still the margins don't go away.

#row4div {
  clear: both;
  width: 100px;
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
}
<div id="row4div">
  <span id="row4">
    <label> Degree : </label>
  </span>
</div>

Upvotes: 1

Views: 48

Answers (2)

vgesteljasper
vgesteljasper

Reputation: 68

I'm pretty sure this has to do with how the code is handled in webkit. This happens in Chrome and Safari, but not in Firefox.

If you add

float: left;

to your div this margin on the right disappears. This way you can position other elements next to it if you want to by giving the next element

float: left;


#row4div {
    /* clear: both; */
    width: 100px;
    margin-top: 60px;
    margin-left: 0px;
    margin-right: 0px;
    
    float: left;
}
<div id="row4div"> 
    <span id="row4">
        <label>Degree :</label>
    </span>
</div>

Upvotes: 1

m4n0
m4n0

Reputation: 32275

Browser by default adds some margin to the body element. You need to add margin: 0 to the body element.

html, body {
  margin: 0;
  padding: 0;
}

#row4div {
  clear: both;
  width: 100px;
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
}
<div id="row4div">
  <span id="row4">
    <label> Degree : </label>
  </span>
</div>

Upvotes: 2

Related Questions