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>
Related
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..
Trying to make a header touch the top of my page, however there seems to be an automatic margin, even if specified otherwise.
I've tried specifying margin-top: 0, and have set margin: 0 to the body as well.
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
<h1>test</h1>
Instead of touching the top of the page, the "test" header has an automatic margin at its top.
adding line-height: 75%; seems to do the trick:
h1 {
margin-top: 0px;
line-height: 75%;
}
body {
margin: 0px;
}
Just add the line-height for your h1 tag. Optionally set the line-height for body also.
h1 {
margin-top: 0px;
line-height: 18px;
}
body {
margin: 0px;
line-height: 1.15;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>test</h1>
</body>
</html>
The header in not touching the top even after setting margins to zero, must be due to line-height.Try to set a colored border i.e. border: 1px solid green. If you see that the border is touching the top then the real reason is the space around text/font due to line-height.
The line-height is set by the standard css rules included in the html page to create proper spacing between text OR by default it is set to normal which uses a standard value. So if you reduce space around text using line-height property it will do the trick but i do not recommend to reduce it less than 1 : line-height: 1
Use Uppercase letters and you will see that your element is already touching the top of the screen so it's logical that the lowercase ones will be sligthly lower.
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
<h1>ÂtestË</h1>
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 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.
With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:
See that extra vertical space between the hello and the image? How do i remove that? I know I can absolutely position the image closer up to the hello but I would like to know what's causing the space.
My code:
HTML:
<div class="Box">
<p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50" SRC="pic.jpg">
</div>
CSS:
.Box //this is the parent div
{
background-color:red;
width:60px;
margin:0px;
margin-bottom: 0px;
padding:0px;
}
.contextimg //this is for the image
{
position:relative;
margin:0px;
padding:0px;
line-height:0px;
}
Note: I've also tried to set the body's margin and padding to 0 but it didn't work.
It's common for browsers to give paragraphs a default margin. So just take it away.
Give the <p> a margin of 0:
.Box p{
margin: 0;
}
Check it here: http://jsfiddle.net/aG27X/
That's the default padding/margin of p element, try using
.Box p {
margin: 0;
padding: 0;
}
You should reset browser defaults before designing any webpage, if you want a quick solution than using
* {
margin: 0;
padding: 0;
}
Will suffice your needs, you can also google out for CSS reset stylsheets, these stylesheets will reset each elements precisely
Set the padding and margin top/bottom of the <p> tag to 0. <p> tags automatically have a default padding/margin set, in case you dont overwrite it by something else.
p {
margin: 0;
padding: 0;
}
p stands for paragraph. the paragraph automaticly adds space like this: Fiddle
and you can remove it like this: fiddle
I can't tell you what your problem is, but from this fiddle: http://jsfiddle.net/u6C9E/
p { margin: 0; padding: 0; }
works.
If you have any image above and/or bottom of the paragraphs, make the paragraphs in two class.
HTML:
<p> class="first">Your 1st Paragraph</p>
<p> class="second">Your 2nd Paragraph</p>
The CSS :
p.first {
text-indent: 2em;
margin-bottom: -5%;
}
p.second {
margin-top: -5%;
text-indent: 2em;
}
Use "%" to let it still looking good in responsive web...