Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css & html5: why does my body have a spacing at the top?

Tags:

I don't get it. I have …

body, html {     height:100%;     margin:0;     padding:0; } 

However my browser is always showing the vertical scrollbar even if the content is not as hight as the window.

In the following screenshot you can see that there is this little spacing on top if I inspect the body. The htmldoes not have this spacing.

Any idea what could cause that?

enter image description here

like image 967
matt Avatar asked Aug 10 '11 08:08

matt


People also ask

What CSS means?

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.

What is the 3 types of CSS?

There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.

What is CSS and why it is used?

CSS stands for cascading style sheets. In short, CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text. Whereas HTML largely determines textual content, CSS determines visual structure, layout, and aesthetics.

What do you learn in CSS?

You'll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you'll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.


2 Answers

You probably have an element with margin-top as one of the first children of body.

Read up on collapsing margins.

Purely as a simple test, set padding: 1px on body. If the gap goes away, I'm right.

like image 138
thirtydot Avatar answered Oct 16 '22 21:10

thirtydot


Late to the conversation, but thought this might help some...

If this a WordPress based site, it is likely that WordPress is adding:

 html { margin-top: 32px !important; } 

It is doing this in order to make space for the admin bar, which, apparently, for some reason isn't showing up.

To resolve this, add the following to your theme's functions.php file:

add_filter('show_admin_bar', '__return_false'); 
like image 40
Jahmic Avatar answered Oct 16 '22 22:10

Jahmic