CODEWITHSUNDEEP
htmlcss
alexey
alexey

Reputation: 1411

Can't in remove gap between top and header

I have few css i can't remove strange space between top and header.

container.css

display: table;
height: 100%;

Inside i have

header.css

text-align: center;
width: 90%;
padding: 0px;

And that's how it looks enter image description here

Setting padding and margin to 0 is not working for some reasons.

Only one way to move header that i found is changing

margin-top: 0px;

Bug it doesn't change until i change to -22.

If i change it to -23(exactly -23) then it moves out of page like this :

enter image description here

Can someone help find the reason? Thank you for assistance.

fiddle - try to change margin-top of header

Upvotes: 1

Views: 145

Answers (3)

Vinaya
Vinaya

Reputation: 363

In HTML some elements come with their own margin and padding. To remove this default margin, padding we should "reset css".

Add following code in your css

*{
    margin:0;
    padding:0;
}

Check if it helps :)

star (*) is universal selector. It'll reset all elements margin and padding.

Upvotes: 0

yousef sami
yousef sami

Reputation: 263

Add this css 

vertical-align: top;

Upvotes: 0

Paul
Paul

Reputation: 9022

Both your menu and your content are treated as table-cells. Add

.main-box { vertical-align: top; }

to your CSS to get rid of the auto margin.

Upvotes: 1

Related Questions