How to make a div tag without margins in css? [duplicate]


Tags: css

Problem :

Possible Duplicate:
Get a div to go across the whole page

I need to make a div tag that will start from the beginning of the browser, not after a margin, for example when I make this code:

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
div
{
width:100%;
height:100%;
border:1px solid black;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

The div starts after a margin from top, left and right. But I want it to start with no margin, even when I make the margin:0px 0px; it still won't work. So, what do I do to make it with no margins and is that method useable with images too?



Solution :

html, body {
    margin: 0;
    padding: 0;
}
div {
    margin: 0;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

Without the box-sizing you will end up with a div which is 100%+2px wide and 100%+2px tall.


    CSS Howto..

    How to change tooltip color on open using jQuery UI Tooltip?

    How to make CSS animation happen the moment the website loads

    How can I disable the color defined in an previously defined CSS class

    How to centralise navigation bar

    How to set a style one a parent element [duplicate]

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How can a user add content to a website? [closed]

    How can I style a JavaFX SplitMenuButton in CSS

    How to showing expanding text with javascript and css

    How to create dropdown navigationbar without float?

    How to change Polymer(1.0) paper-toolbar background colour?

    How to override a filter:none in CSS

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    Horizontal navigation menu - how to increase size of
  • on hover
  • How to use a CSS attribute selector to target a specific height?

    Example of how to load static CSS files from node_modules using webpack?

    How can I inject a static CSS File in GWT like it is done with JS Files?

    How to make inner UL list not inherit from outer UL List in CSS

    How do I change the alignment of my search box?

    how to make this fit in same line in css

    How to know from css if a select is opened

    How do I get Jquery to toggle display

    Best way how to put elements above an tag?

    How to animate a rotated DOM element with CSS

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    How to make text in transparent div opaque? [duplicate]

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to apply Hovering on html area tag?

    How to align 3 divs with CSS retaining relative position while scaling window