How can I get rid of margin around my HTML content?
You could add CSS to the document....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.
Removing body margin in CSS
I would say that using:
* {
margin: 0;
padding: 0;
}
is a bad way of solving this.
The reason for the h1 margin popping out of the parent is that the parent does not have a padding.
If you add a padding to the parent element of the h1, the margin will be inside the parent.
Resetting all paddings and margins to 0 can cause a lot of side effects. Then it's better to remove margin-top for this specific headline.
How to remove margin space around body or clear default css styles
body
has by default 8px
margins: http://www.w3.org/TR/CSS2/sample.html
body {
margin: 0; /* Remove body margins */
}
Or you could use this useful Global reset
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
If you want something less *
global:
html, body, 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, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
some other CSS Reset:
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/
…
How do I remove the top margin in a web page?
I had similar problem, got this resolved by the following CSS:
body {
margin: 0 !important;
padding: 0 !important;
}
Removing the white margin around my image
Try this, And put your div in the <body>
* { margin: 0; padding: 0;}
.image { width: 100%; height: auto;}
<body> <div> <img class="image" src="G:\Pics\1.jpg"> </div></body>
Related Topics
Dropdownlistfor Will Not Show The Correct Selection
Gradient Colors in Internet Explorer
Hide Microdata Property Value in 'Content' Attribute
How Should a <!Doctype> Section Look in Jsf? HTML5 or Xhtml
What Does "Top: 0; Left: 0; Bottom: 0; Right: 0;" Mean
Clear Canvas Rect (But Keep Background)
Why Does Display: Inline-Block; Remove an Underline from a Child Element
How to Use an Image from My Local File System as Background in HTML
Border Around Specific Rows in a Table
Accessibility: Recommended Alt-Text Convention for Svg and Mathml
CSS Align Images and Text on Same Line
Display: Flex Not Working on Internet Explorer
Centering a Div Between One That's Floated Right and One That's Floated Left