CODEWITHSUNDEEP
htmlcss
avirk
avirk

Reputation: 3086

Top margin for DIV is not working?

I have a css where I defined a class for the top div with these properties

.topbluebar { 
 margin:0;    
height:19px;  
width:100%;  
background-image:url('../../Images/top_blue.gif');  
clear:both;  
}

Here is the simple Html page

<link href="~/Content/Style.css" rel="stylesheet" />  

    <div class="topbluebar"></div>  
<div>Foo foo</div>

Image is appearing but not with the top of browser but with little margin from top which I don't want. In simple words I want to implement it like Stackexchnage topbar class but it doesn't seems to work for me at all.

I have read many answers but none of them worked for me yet.

enter image description here

Upvotes: 1

Views: 63

Answers (3)

ChaseHardin
ChaseHardin

Reputation: 2269

A really simple solution would be to add the following css (below) to the top of your file. This essentially resets the margins to 0.

Here is a link to the updated JSFiddle: https://jsfiddle.net/r58hvuzp/

*{
    margin: 0;
 }

Upvotes: 3

Rahul Soni
Rahul Soni

Reputation: 4968

Try adding the following in your stylesheet.

body { margin:0;padding:0 }

http://jsfiddle.net/z18Lpy99/

Also, to avoid these kind of issues, it is a good idea to use CSS Resets. Try reading up on http://cssreset.com/

Upvotes: 4

Muhammad Umer
Muhammad Umer

Reputation: 18097

Try this

* {
   margin: 0;
   padding: 0;
}

Basically lots of things in html has default styles which include default values for padding and margins.

Upvotes: 2

Related Questions