Reputation: 89

HTML div alignment has gap

I have a small problem...

enter image description here

it's top left web page corner. There I have a div with background and div are few pixels away from edge.

My code:

HTML

<div id="contcont"></div>

CSS

#contcont{
  width: 100% ;
  height: 100%;
  background-color: rgb(0,0,255);
  background-image:url('bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
}

How can I remove the gap?

Upvotes: 0

Answers (7)

Elixir Techne

Reputation: 1856

Try adding following style in your css. margin, padding and border will be inherited by all elements in the file. And you can override as and when required.

html, body { 
     margin: 0px; 
     padding: 0px; 
     border: 0px; 
}

Upvotes: 1

Sahil Popli

Reputation: 1995

use reset by Eric Meyer

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

Upvotes: 0

ChoiZ

Reputation: 732

Reset your css styles

Take a look on reset css file http://meyerweb.com/eric/tools/css/reset/

Upvotes: 2

allcaps

Reputation: 11228

Most browsers have a default margin for the body element. So include:

body { margin: 0; padding: 0; }

To remove all browser defaults, to begin clean, do a Google search on: 'css reset'

Upvotes: 6

scrblnrd3

Reputation: 7416

I'm guessing you want the picture flush to the top left, so this is what you have to do

#contcont{
  width: 100% ;
  height: 100%;
  background-color: rgb(0,0,255);
  background-image:url('bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top:0px;
  margin-left:0px;
}
body{
   padding-top:0px;
   padding-left:9px;
}

Upvotes: 1