This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 6 months ago.
This post was edited and submitted for review 6 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Could anyone shed some light upon the source of the 8px whitespace at the bottom of the element box when inspected with DevTools?
/* No stylesheet - all CSS from DevTools on Chrome user agent stylesheet */
element.style {}
html {
display: block;
}
head {
display: none;
}
body {
display: block;
margin: 8px;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
<html>
<head></head>
<body>
<p>Hello, world</p>
</body>
</html>
Highlighting the <html> element box with DevTools shows its vertical dimension to be 189px:
Whilst from DevTools, the highlighted <body> element box has a total vertical dimension of 181px (including margins).
Why does the <html> element box extend down by 8px beyond the <body> element box at the bottom of the page?
Its called default margin set by the browser . If you want to reset everything to zero you can use
*{margin:0; padding:0;}
Browsers come with a surprising amount of CSS by default, which we call user-agent stylesheets. These styles are the reason that, without any CSS on our part, an <h1> is bigger than an <h2>, and why the <body> has a margin on it that we tend to always remove.
a
Like Kevin Powell writes on freecodecamp, it's quite normal to the following at the start of a new project.
body {
margin: 0;
}
Related
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 6 months ago.
<style>
body {
background: rgb(36, 36, 36);
color: white;
padding: 0;
margin: 0;
text-align: center;
}
#font-face {
font-family: TypoRoundRegular;
src: url(fonts/Typo_Round_Regular_Demo.otf);
}
* {
font-family: "TypoRoundRegular";
}
</style>
</head>
<body>
<h1 style="font-size:50px;"> Aetherian's Portfolio</h1>
<p style="line-height: 0;">Discord: Aetherian#6664</p>
</body>
</html>
Like said in the title, why is the space between the big header "Aetherian's Portfolio and "Discord: Aetherian#6664" so big?
https://gyazo.com/1c8b6c6271ebd9d5eab59ba637fb44de
I would like to get the bottom text much closer to the header text.
You can use your browser's developer tools to investigate what's going on.
You will see that h1 has a certain margin-bottom.
To reduce it, add:
h1{
margin: 0;
}
This is because of the default bounding box of the two elements.
As you can see from the example (from firefox dev tools), there is the element itself, and the padding, border and margin.
If you reduce the bottom-margin of h1 or reduce the top-margin of p, they will move closer together. These values can go into the negative if necessary.
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 5 years ago.
I just started building a webpage using html and made a simple header for it. I want the header to be exactly along the borders of the screen but there is a white space all around my header. This is how it looks:
I changed my css by setting the margin, border and outline of my header to 0. But this doesn't seem to do the work and the white space is still there. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<style type="text/css">
h1{
margin:0 auto;
padding:20px;
border:0;
outline:0;
background: #003399;
color: #ffffff;
font-family: "Calibri";
font-weight: normal;
}
</style>
</head>
<body>
<header>
<h1>This is my website.</h1>
</header>
</body>
</html>
I can't figure out what my error is. Please anyone help. Thanks for the attention.
By default body tag take some CSS, just add following css for this
body {
margin: 0px;
padding: 0px;
}
In all my projects I place this code just at the start of my CSS files:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
So I have more control about margins, paddings and sizes (box-sizing: border-box makes borders and padding being applied inside the container size, not as an extra size, so it's easier to play with percentage sizes).
Another option is to put normalize.css before your styles, that already includes usual corrections like these.
Add this css
body, html {
margin: 0px;
padding: 0px;
}
I'm not new to HTML or CSS, but I really don't know why this is happening. I could just be dumb and this is an easy question something is really wrong. I'm really having trouble with this. I have a very simple web page with a div element. Not matter what I do I still have space at the top, side, and bottom of it. Here's a picture.
And Here's my HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
.SideBar {
background: #4c4c4c;
float: left;
height: 100%;
margin-left: 0px;
padding-right: 25px;
}
</style>
</head>
<body style="background-color: #05bcff">
<div class="SideBar">
<p style="margin: 0px; padding: 0px">
asd
</p>
</div>
</body>
</html>
You should assign margin 0 and padding 0 to body element in your styling.
As Frontend employee said just add
.body{
margin: 0;
padding: 0;
}
a lot of people employee CSS reset codes at the top of their stylesheets which includes this. Its basically a list of default overrides that clears any styling on elements allowing you to begin with a clean slate
See (http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/)
This happens because the <body> element has margin by default in some browsers. Different browsers can choose to apply some basic default styling to elements. Chrome, for example, adds 8px margin to by default. If you set
body {
margin: 0px;
}
This will dissappear.
A better way to go about it is to include Reset.css or Normalize.css in your code. Reset.css will unstyle absolutely everything, so that what you write is exactly what is displayed. This gives you greatest control but for most cases it's too much. For example, <h1> , <h2> , <h3>.. tags will all look the same after applying Reset.css .
Normalize.css on another hand preserves useful styling but will make sure that your elements are rendered consistently across all browsers. This is preferred in most cases.
In Codepen you can even try these out. If you click 'Settings' you can choose to include 'Normalize' or 'Reset' in your CSS. You can play around with these to see how your elements are displayed under each.
Cant seem to find how to remove vertical space between two text elements, There are some similar problems on this website but doesn't seem to actually work.
HTML Code:
<p>this website is</p> <h1>Encrypted</h1>
it seems that I would have to use a position code, but when I use a position code that lets other elements get close to it, the text gets pushed to another spot on the website
Remove white space between elements using CSS:
Horizontal being (top and bottom space)
h1, p {
margin-top: 0;
margin-bottom: 0;
line-height: /* adjust to tweak wierd fonts */;
}
Vertical being (left and right space)
.parent {
font-size: 0;
line-height: 0;
}
h1, p {
font-size: 12px;
margin: 0;
display: inline-block;
}
JSFIDDLE
Every browser has pre-set styles for elements. p and header tags have margins set. You can change this by using margin: 0;: JS Fiddle
You may also benefit from using a CSS Reset to avoid these issues.
Also, I don't imagine a scenario where the word "encrypted" in your code should be using an <h1> tag: How to properly use h1
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am using HR tag in my HTML page. But the horizontal line is not covering the whole page along X axis. There is a gap at left and right both. How can I fill this gap?
For example, below is a sample code -
<html>
<hr>
</html>
You can do the following -> demo
You have two options that I know of anyways - Using a horizontal line or a div with a top or bottom border.
The reason why you have a space or gap is because browsers comes with different pre-set settings - so you need to set margin and padding to zero. Take a look at the demo.
CSS
* {
margin:0;
padding:0;
}
hr {
margin-top: 30px;
/*so you can see it in demo */
width: 100%
}
.demo {
position: relative; /*so I could use 'top: 30px' */
top: 30px;
/*so you can see it in demo*/
width: 100%;
border-top:1px solid black;
}
HTML
<hr/>
<div class="demo"></div>
Edit: As Ojdo commented, you CAN reset before working on a project using something like this Meyer's Reset OR you can make it 'cross-browser' compatible and use normalize.css from Necolas - this basically tries to make your default css look consistent among several browsers. The choice is ultimately up to you. Start from the ground up or start with something somewhat consistent.
that's because of the margins of the body. try this:
<html>
<body style="margin:0;">
<hr>
</body>
</html>
put this css on the hr:
hr {
margin-left: -8px;
margin-right: -8px;
}
This happens as there is always automatic margin
Here is a fiddle example:
http://jsfiddle.net/ha97t/
The gaps are caused by the default margin of 8px for the body element (which is a common browser default and described both in CSS 2.1 and in HTML5 CR).
You can override the horizontal margins of body rather simply:
body { margin-left: 0; margin-right: 0 }
It is possible to use more extensive overrides, like “CSS resets”, but they could affect your page layout in many ways and do not contribute to solving this problem any better than simply overriding the specific properties for body.
However, removing those margins means that text will run from the left edge of to right edge, often making letters touch the edges. So if you wish to make the horizontal rule extend across the page without affecting anything, set negative margins on it. Then it is best to set the body margins explicitly (to guard against browsers not implementing them according to common practice):
body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }