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 html
does not have this spacing.
Any idea what could cause that?
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.
There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.
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.
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.
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.
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With