Remove white space at the top and the bottom in h3

Question

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>

Welcome to StackOverflow! In order for us to help you with CSS, you will need to provide your existing CSS in addition to your HTML; we can't reproduce your problem without it. Please update your question so that it shows your CSS as well, thus forming a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) — Obsidian Age, Jul 04 '17 at 20:49

score 1 · Accepted Answer · answered Jul 04 '17 at 20:52

1

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;

answered Jul 04 '17 at 20:52

Andy Ray

30,372
14
101
138

1

I understand, when a title is HËLLÔ, then the h3 uses the full space. Thank you very much! – Martijn Jul 04 '17 at 21:00
I did! But when I change the line-height, I can not yet margin on the highest letter. – Martijn Jul 04 '17 at 21:12
1

@AndyRay How to help others find the answer its solution for particular user .. ?? dynamically you also know this happens with browser default css . am i right !! – RïshïKêsh Kümar Jul 04 '17 at 21:14
No that's not @RïshïKêshKümar, but of all the comments this is the "best" solution. – Martijn Jul 04 '17 at 21:15
@Martijn .. Check My Ans ... and set the `` – RïshïKêsh Kümar Jul 04 '17 at 21:15
+1. This seems to be the right answer. I don't know why people down-voted it. See also https://stackoverflow.com/a/14061972/470749 – Ryan Aug 16 '19 at 00:00

score 0 · Answer 2 · answered Jul 04 '17 at 20:52

0

Remove the padding of the container element (in your example, the <body> tag):

body { padding: 0 }

answered Jul 04 '17 at 20:52

aaguilera

1,080
10
27

RïshïKêsh Kümar · Answer 3 · 2017-07-04T21:06:07.593

0

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>

edited Jul 04 '17 at 21:06

answered Jul 04 '17 at 20:56

RïshïKêsh Kümar

4,734
1
24
36

There is still some space between the top from which it is aligned and from the top of the highest letter. You can see it when you select the text. Sorry, but this is not the solution. – Martijn Jul 04 '17 at 21:31
It's Margin is zero , so how and where you see the space.. I can't believe .. okzz listen go and just google it for .. how to remove browser default css !! So you can easily understand what going on... And if you thik `line-height:0.8 is solution` then go for it.. – RïshïKêsh Kümar Jul 04 '17 at 22:15
Sorry .. but I don't thik it's right ans .. bcoz when you run the same code in different _different browser then you get the real difference .. between .. So best of luck.. happy to help.. I don't have any problem !! Thank you – RïshïKêsh Kümar Jul 04 '17 at 22:19

score 0 · Answer 4 · answered Jul 04 '17 at 21:01

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.

Remove white space at the top and the bottom in h3

4 Answers4