Jump to content
Please Use CODE Tags

Why is there a margin?

Hip
By Hip
in Programming
 Share
Posted

Hey guys,

 

I am coding a nonesense website just for fun and somehow I don't know why this margin on the top appears.

Can anyone tell me why?

 

 

 

Thanks in advance.

Unbenannt.PNG

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Ah, a fellow Brackets user. Honestly, I don't know what could cause that. Looking at your open projects, it appears you have two CSS files open. Perhaps the second CSS is causing it?

I build computers and networks. Fibre Optic is my only dream imaginable. 

Studying for my CompTIA A+ and my CCNA, if you have any tips, let me know please!

 

Main PC: i5 8400, Saphire RX 570 4GB, ASUS TUF Z370 PLUS Gaming, 32GB 3200MHz Patriot Viper RAM, 256GB Kingston SSD, 2TB Seagate Barracuda HDD, 550W Evga PSU.

 

Home Server: 2x Xeon e5410, 64GB DDR2 ECC

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 minutes ago, callmejaccob said:

Ah, a fellow Brackets user. Honestly, I don't know what could cause that. Looking at your open projects, it appears you have two CSS files open. Perhaps the second CSS is causing it?

The second one is even located somewhere totally else ?

Somehow the margin is not included in the "header-logo" div.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, Hip said:

The second one is even located somewhere totally else ?

Ah. Perhaps some browser bullcrap going on. I'm a little rusty on HTML5, but I'm getting back into it.

I build computers and networks. Fibre Optic is my only dream imaginable. 

Studying for my CompTIA A+ and my CCNA, if you have any tips, let me know please!

 

Main PC: i5 8400, Saphire RX 570 4GB, ASUS TUF Z370 PLUS Gaming, 32GB 3200MHz Patriot Viper RAM, 256GB Kingston SSD, 2TB Seagate Barracuda HDD, 550W Evga PSU.

 

Home Server: 2x Xeon e5410, 64GB DDR2 ECC

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Do inspect element on the pink block and see whats causing the spacing. After determening that you can do xxx: 0 (if it's margin then you can be like margin-top: 0, margin-left:0 and so on). It's stupid but this forces things like you want it.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Are you resetting the default styles? Also just inspect it and reset it.

I am NOT a native english speaker and use translate a lot, please do not take it literally and bear with me.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
9 minutes ago, jaslion said:

Do inspect element on the pink block and see whats causing the spacing. After determening that you can do xxx: 0 (if it's margin then you can be like margin-top: 0, margin-left:0 and so on). It's stupid but this forces things like you want it.

That's what I get when I click on the header-logo:

 

 

Unbenannt.PNG

 

Here is the code now:

 

Unbenannt.PNG

 

 

@bumbummen

What do you mean? Which default settings?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Browsers or web-views normally come with pre-defined css. You have to actually reset those vendor defaults to start on 0 with all browsers and achieve the same behaviour. I'd suggest reading up about it here (just first google result). If i may give you an advice, take 2 hours of time and read into scss/sass, you will not regret it.

I am NOT a native english speaker and use translate a lot, please do not take it literally and bear with me.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

There is padding on the body which is built into the browser to make sites without CSS look nicer.  It's a good idea to start your CSS with this: 

* {
	margin: 0;
  	padding: 0;
}

It removes all margins and padding which you should then define yourself.  You absolutely should still learn CSS but I recommend using a framework like Bootstrap (but there are plenty other options) which does most of the hard work for you.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
6 hours ago, Hip said:

Hey guys,

 

I am coding a nonesense website just for fun and somehow I don't know why this margin on the top appears.

Can anyone tell me why?

 

 

 

Thanks in advance.

Unbenannt.PNG

* {margin:0;} (it's a default value for all browsers..

 

Btw.. You can also get it away buy using position:fixed/absolute;

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 2/28/2020 at 3:35 AM, AbsoluteFool said:

* {margin:0;} (it's a default value for all browsers..

 

Btw.. You can also get it away buy using position:fixed/absolute;

 

What do you mean? When I say position: fixed; won't it just stick at the top? 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Don't put margin and border and padding on * because it screws things up.

 

Put it on html or body

 

Browsers will have defaults for margin and border and they can vary between browsers.

 

also in your picture you have two html tags. only one is valid.

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

By default, the <body> element has a margin of 8px, which would allow plain text pages to look ok without pressing the text right to the edge of the page. You can remove that by adding 

body {
	margin: 0;
}

You could also just apply margin 0 to * as suggested above, which will clear out all of the unexpected margins (on elements like <p>), it's just a matter of personal preference.

 

The best way to debug issues like this is to use the browser dev tools. If you inspect element on body, you can see that it has a computed margin of 8px on each side, but looking at the rules tab you would see that there are no user rules applying to the element. That tells you that it must be a browser default style.

image.png

HTTP/2 203

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
20 hours ago, mariushm said:

Don't put margin and border and padding on * because it screws things up.

 

Put it on html or body

 

Browsers will have defaults for margin and border and they can vary between browsers.

 

also in your picture you have two html tags. only one is valid.

 

 

When I put it in html it looks like this:

 

11111111.PNG

 

In body it is correctly ?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
19 hours ago, colonel_mortis said:

By default, the <body> element has a margin of 8px, which would allow plain text pages to look ok without pressing the text right to the edge of the page. You can remove that by adding 


body {
	margin: 0;
}

You could also just apply margin 0 to * as suggested above, which will clear out all of the unexpected margins (on elements like <p>), it's just a matter of personal preference.

 

The best way to debug issues like this is to use the browser dev tools. If you inspect element on body, you can see that it has a computed margin of 8px on each side, but looking at the rules tab you would see that there are no user rules applying to the element. That tells you that it must be a browser default style.

image.png

So I just put it into body now but a user above said that in * it could screw some stuff up. Which one would be better than?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
2 hours ago, Hip said:

So I just put it into body now but a user above said that in * it could screw some stuff up. Which one would be better than?

* is the least specific selector in CSS, so it will only override the browser's default styles. As far as I know, setting the default margin to 0 on everything shouldn't cause any problems (just require you to add margin back to some things), so it shouldn't break things and is fine to do. Typically (though there is a huge variety) websites will be more granular in overriding the styles because they will end up setting some of them to non-zero anyway though, so you might prefer to just update the margins on each element as you come across ones that look bad.

 

There's no right or wrong way, both are fine, but you might find it easier to use * to begin with so that you start with a known state and don't have to worry about whether the browser added any styling.

HTTP/2 203

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×