CODEWITHSUNDEEP
htmlcss
Raph Schim
Raph Schim

Reputation: 538

CSS and spacing

I have a little problem with this part of CSS (it doesn't seem to be a lot, but I don't understand ... )

#bas {
    position:absolute;
    background-color: #ccc;
    margin-top:10%;
    width:100%;
    height:90%;
}

#haut {
    position:absolute;
    background:#FFFF00;
    margin-top:0%;
    width:100%;
    height:10%;
}

So, in my mind, #haut will take 10% of the page and #bas will take the other 90% with "haut" above "bas".

But if you look on this fiddle https://jsfiddle.net/ypteL83a/2/ There are spaces between the top of the page and "haut", and a greater space between "haut" and "bas", and I was wondering why is this space here?

Thanks in advance!

Upvotes: 0

Views: 72

Answers (5)

Nikush Jorjoliani
Nikush Jorjoliani

Reputation: 93

When u use margin/padding top/bottom it's calculated based on width and not height. I am pretty sure that's the case here

Upvotes: 0

Dutton
Dutton

Reputation: 11

There is a default margin on your content, if you put margin:0; on your #bas div it will align with the top element.

#bas {
position:absolute;
background-color: #ccc;
margin-top:10%;
width:100%;
height:90%;
margin:0;
}

Upvotes: 1

SAGAR MANE
SAGAR MANE

Reputation: 685

Try This 

 #bas {
            position:absolute;
            background-color: #ccc;
            margin:0 auto;
            width:100%;
            height:90%;
        }

Upvotes: -1

Arif Burhan
Arif Burhan

Reputation: 505

In #bas margin-top: 10% will take up the top 10% of the height of the browser Window.

Upvotes: 0

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

Use top for absolute positioning, not margin-top:

https://jsfiddle.net/ypteL83a/4/

body
{
  background-color:#FFFFFF;
  margin:0 ;
}

#bas {
  position:absolute;
  background-color: #ccc;
  top:10%;
  width:100%;
  height:90%;
}

#haut {
  position:absolute;
  background:#FFFF00;
  top:0%;
  width:100%;
  height:10%;
}

Upvotes: 2

Related Questions