Member Avatar for suncica2222

I have margine on <div> on top and left that I dont want.

Here's the CSS:

#wrapper {
border:0;
margin: 0 auto;
top:-10px;
background:black;
}

Here's the pic:

  • 4 Contributors
  • 11 Replies
  • 118 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by suncica2222

Dani AI

Generated

Most browsers add a small default margin on the page root, so the top/left gap you saw is a very common issue. In this thread was right to suggest resetting the root margins, correctly warned against using JavaScript to build basic layout, and noted legacy attribute workarounds. The actual blocker here was a tiny typo in an inline style that caused the browser to ignore the reset — once the inline rule was fixed the gap disappeared (as later reported).

Fast way to diagnose: open your browser devtools, inspect the area, and look at the computed box model to see which element reports the margin. If the margin is on the body/html, a reset rule should remove it. If it comes from the first child inside your wrapper, that’s likely margin collapse: a child’s top margin can “escape” its parent and create the space you see.

Practical fixes and tips:

  • Ensure a valid DOCTYPE so the page uses standards mode.
  • Fix any CSS/inline-style syntax errors (they silently invalidate rules).
  • Prefer a stylesheet reset for html/body and load it reliably rather than relying on inline styles or document.write.
  • Avoid using document.write to generate your main layout; build the DOM or serve static HTML to avoid timing and parsing surprises.
  • When debugging, give elements temporary backgrounds or outlines to reveal which box is causing the gap.

If the gap still shows after those checks, validate the HTML/CSS and re-inspect computed styles — that will pinpoint whether the browser default, a stray element, or a collapsing margin is at fault.

Recommended Answers

All 11 Replies

Member Avatar for ko ko 
html, body {
       margin: 0;
       padding: 0;
Member Avatar for suncica2222 
html, body {
       margin: 0;
       padding: 0;

It still has a margin,nothing changes. :S

Member Avatar for drjohn

A link to the page so we can examine more than three or four lines of code will help! (although it does look like the reset should have helped)

Member Avatar for suncica2222

html file:

<head>




<title>Naslov</title>
<link rel="stylesheet" type="text/css" href="sveska1.css" />
<script type="text/javascript" src="main1.js">
</script>


</head>

<body style="background-color:violet;margin 0; padding: 0;">
<script type = "text/javascript">
		
var a = new Klasa();

a.Render();
	
</script>
</body>
</html>

js file:

function Klasa()
{
	
	
	
		this.Render = function(){
			
			// Pravim glavni DIV koji ce predstavljati body
			var el = document.createElement("div");
		
		  var el1 = document.createElement("div");	
			el1.id = "wrapper";
			el1.className = "wrapper";
			el.appendChild(el1);
  		//alert(el1);
    
			var el2 = document.createElement("div");
			el2.id = "gore";
			el2.className = "gore";
			el1.appendChild(el2);

		
		// Pravim DIV centar koji ce sadrzati navigaciju i sadrzaj
		var el3 = document.createElement("div");
		el3.id = "sredina";
		el3.className = "sredina";		
			
		el1.appendChild(el3);
				
		var el4 = document.createElement("div");
		el4.id = "dole";
		el4.className = "dole";
		el1.appendChild(el4);
		
		
		//Sada html koji se nalazi u okviru upisujem u dokument.
		document.write(el.innerHTML);
		//ili
		//document.body.innerHTML = el.innerHTML;
	};
	
		
}

CSS code:

#wrapper { 
 border:0;	
 //margin: 0 auto;
 //top:-10px;
 background: black;
 margin: 0;
 padding: 0;
}

#gore{
	
	width: 760px; 
	height: 90px;

	background:red;
	margin: 0 auto; //auto je da stoji na sredini
	
}

 
#sredina{
	background:grey;
	width: 760px; 
	margin: 0 auto;
	height:400px;
		
}

#dole{

	margin: 0 auto; 
	text-align:center;
	width: 760px; 
	height:40px;
	background:green;
	
}

#linkovi{

	right:150px;
	text-align:center;
	
}
Member Avatar for drjohn

Dump the totally unnecessary javascript!!!!

Write html.

Member Avatar for suncica2222

Is here someone serious to help me solve this?

Member Avatar for ko ko

In your HTML file. There is no html tag. Check out and make sure your codes were valid.

Member Avatar for suncica2222

I've corrected it,still the same. :S

Member Avatar for drjohn

I was serious.
Writing javascript whose sole purpose is to create create something you can more easily create is straight html is not a good way to build a web page. Yes, you could use javascript to write some variable content to an area, but not to write your basic html and layout divs.


PS the reset seems to be lacking a closing } , but I'm assuming that was just a typo here and it is correct on the actual web page.

Edited by drjohn because: n/a
Member Avatar for vsmash 
<style>
body{margin:0;padding:0;}
img{margin:0;padding:0;}
</style>
<body margin=0 padding=0 leftmargin=0 topmargin=0><img src="somimage.jpg" vspace=0 hspace=0>
<body>
Member Avatar for suncica2222 
body margin=0

yes this is the solution,i've found it my self

you solved the thread!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.