B_s B_s - 1 year ago 43
HTML Question

HTML: white space around elements, how to remove?

My webpage contains several divs. Some are set to width: 100%, so they fill the whole page width.
But at the top of the page there is a small whitespace before the first element shows up. Moreover, that same whitespace is visible left and right from elements spanning the whole page width.

I cannot figure out why. If I set:

html, body {
width: 100%;

then the whitespace remains but the page is just stretched out to fit the image width of a div.

Can anyone help? It's probably pretty simple but I must be overlooking something.
Thank you.

EDIT: I must mention I'm using a parallax element. This uses a padding, so the image does fills the whole div and does not leave a black area on top. The HTML is:

<div class="js-background-1 container">

The CSS:

.container {
padding-top: 200px;

.js-background-1 {
background: transparent url(url/to/image) center 0 no-repeat;

And the javascript:

<script type="text/javascript">
var $window = $(window);
var velocity = 0.4;
function update(){
var pos = $window.scrollTop();

$('.container').each(function() {
var $element = $(this);
var height = $element.height();

$(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');

$window.bind('scroll', update);


I used the tutorial from http://www.webdesign.org/how-to-create-a-parallax-scrolling-website.22336.html, so there is where it is from. I changed the HTML a bit for my website, but the rest is the same.

I saw the comment about the margin and padding set to 0, but that leads to my div to have a blank space if you don't scroll far enough.

Answer Source

You must remove the margin on body:

body {

You can also remove padding and margin on html and body

html, body {

See it on jsfiddle

But I would not advise to use * (the universal selector)

* {
    margin: 0px;
    padding: 0px;

This would remove padding and margins on all elements.