This should be trivial, but I've spent 2 days and have run out of ideas. Whatever I do, I cannot remove the outer white space between the page html/body and the edge of the browser window. I want the page content to be flush with edge.
I'm using Angular CLI 9.1.8. Same issue on Chrome and Edge on Win 10. I created a stackblitz project here to reproduce the issue:
VIEW: https://angular-ivy-hzzyzi.stackblitz.io/
EDIT: https://stackblitz.com/edit/angular-ivy-hzzyzi?file=src%2Fapp%2Fapp.component.css
app.component.html:
<!DOCTYPE html>
<html>
<body>
How to remove white space between red border and browser edge...
</body>
</html>
app.component.css:
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
border: 1px solid red;
}
The red 1px border is there just so I can see where they are and will be removed. Here's what it looks like:
I have also tried:
display: inline-block;
min-height: 100%;
height: 100vh;
overflow: hidden;
css reset: *{ margin: 0; padding: 0; }
wrapping body or components in <div>
!important at end of each line
I have tried everything in these stackoverflow threads and more:
Issue removing margin with HTML/CSS
Make <body> fill entire screen?
Removing body margin in CSS
HTML and CSS margin issues
HTML and CSS --- margin Problems
html css margin(white spaces at webpage edges)
The root problem is the <html> and <body> tags in app.component.html. Even though body{margin:0} is applied to the component's <body>, there is as a higher-level <body> in index.html adding the unwanted margin. To fix this, remove <html> and <body> from app.component.html and move the styles to styles.css.
This is what my final solution looks like:
styles.css
body, html {
height: 100%;
width: 100%;
margin: 0 !important;
}
index.html
<!DOCTYPE html>
<html>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<header>
<app-main-menu></app-main-menu>
</header>
<main>
<app-landing-page></app-landing-page>
</main>
<footer>
<app-footer></app-footer>
</footer>
Note: Another solution was proposed to set body{position: absolute; top: 0; left: 0} in app.component.css. That actually worked, but masked the real source of the problem, which was the misplaced <body> and <html> tags.
this is before CSS
This is inspecting element
This is before CSS with code
This is after CSS with code
Try to change the margin and padding value of universla selector to zero. If that doesn't work try to change the indivisual value of different element's margin and padding to zero. You can also inspect each element using ctrl+shift+i then find the element which is disturbing the layout.
CSS line will be --
*{
margin: 0;
padding: 0;
}
You must change the padding to 0 also and see if your CSS file is connected to your code.
That's the best i could try..
Related
h3 with white space at the top and the bottom
I have some white space around my h3. To align it the same as some pictures I want to delete the white space at the top and the bottom of the h3. The margin is 0, but there is still space between the top and the bottom of the text. How do I solve this?
this is my code:
<html>
<head>
</head>
<body>
<h3>title</h3>
</body>
</html>
You're confused about what the whitespace is. It's the full line height of the text, which accounts for potential above and below text characters, like accents and dangling letters. If you want to squish this whitespace (not recommended), set the line height to something smaller than the default, like
line-height: 0.8em;
Remove the padding of the container element (in your example, the <body> tag):
body { padding: 0 }
As noted before, it is hard to reproduce your situation without the full CSS code that you have also.
However, a quick test of this gave me a h3 without any whitespace:
<html>
<head>
</head>
<body style="padding: 0;">
<h3 style="margin: 0; padding: 0;">test</h3>
</body>
</html>
It is probably browser dependent what the default margins/paddings on both the body and h3 elements are. I hope this helps you.
Just Remove The Browser Default Margin and Padding Apply Top Of Your Css.
<style>
* {
margin: 0;
padding: 0;
}
</style>
NOTE:
Try to Reset all the html elements before writing your css.
OR [ Use In Your Case ]
<style>
*{
margin: 0px;
padding: 0px;
}
h3 {
margin-top: 0px;
}
</style>
DEMO:
<style>
*{
margin: 0px;
padding: 0px;
}
h3 {
margin-top: 0px;
}
</style>
<html>
<head>
</head>
<body>
<h3>title</h3>
</body>
</html>
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.
I have a page with a image. I want set it top of page.
<HTML>
<HEAD>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY style="background-color:#3baa35;" >
<IMG border=0 src="home.PNG" ></p>
</BODY>
</HTML>
But there is one line of space between the top of the page and the body.
How to set image top of page?
Put some styles:
p { margin: 0; padding: 0; }
This is because each browser has its own default CSS values. You can use Eric Meyer's reset CSS to have the same display on all the browsers :)
Link to Reset CSS
Don't forget to put border: none; as well
IMO, your css properties are okay .
as
Margin is on the outside of block elements
We use padding for inside of block elements .
By default, images align their bottom edges with the baseline of the text.
just use to get rid from this
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
Hope it will help.
Here is a hack to your answer.
Your p tag inherits the font-size from the a tag and thus assigns the margin to a size of 1em which is the size of the letter M of the parent elemt i.e THE a tag
So if you set the font-size of a to 0 then the font-size of p will be 0 and hence the margin too.
Sounds pretty cool right? Here's a working fiddle...
FIDDLE
a{
font-size:0pt;
}
WARNING: This is just for Demo purposes and should not be used in actual working code.
I am learning HTML and CSS, and I want to create a fixed-width page which has a silver background color. I also want the background color outside of the fixed-width area to be black.
The problem is that there is a small black gap above the fixed-width area (above the heading), and I would like to remove this black gap, so that it's replaced with silver color.
How do I solve this?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<h1>Welcome to my homepage.</h1>
<p>This is just a test.</p>
</div>
</body>
</html>
CSS:
body {background-color: #000000;}
.main {
width: 640px;
margin: 0 auto;
background-color: silver;
}
try
body {padding:0; margin:0; background-color:#000; }
try:
border-width:0px;
border and margin are two different things... here's a nice picture for you:
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/
You can do below:
body {margin:0; padding: 0; background-color:#000; }
.main {
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
background-color: silver;
}
problems like this one will be quite common when writing HTML & CSS, it is a hotly debated subject but I would strongly recommend you use a reset style sheet.
All browsers have their own set of rules as to how elements are displayed on a webpage, a reset style sheet goes a very long way to minimise the effect of browser specific style meaning your code reads much more logically and it easier to spot what is going on especially when you have a problem. That said, even with a reset style sheet you should always cross browser check a project as there are always quirks.
Here is one of the most widely used reset style sheets.
http://meyerweb.com/eric/tools/css/reset/
Just paste this above your website CSS on your style.css sheet or create a new stylesheet called reset.css and reference it BEFORE your site.css.