4

I have this code:

<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>

I think HTML would automatically add 1 line spacing in between them. I would like them to just go without 1 line of spacing, line by line I mean, not line space line space.

How could I do this without using a <br> element which is definitely unworkable in between the <h1> and <h3>, and probably not a structurally good HTML practice maybe too right?

Is using a CSS bottom margin fix this?

I am sorry to ask such an easy question maybe, I am a still bit new to HTML & CSS, but I am still learning. Thx in advance for all the answers

isherwood
  • 58,414
  • 16
  • 114
  • 157
K4ll-of-D00ty
  • 153
  • 2
  • 13
  • The header elements have a default margin, that's why there's spaces. If you don't want margins on your header elements, do a [CSS reset](https://meyerweb.com/eric/tools/css/reset/). – Darren Apr 28 '17 at 16:16
  • Or just use `h1, h2, h3 { margin: 0; }`. – dokgu Apr 28 '17 at 16:17
  • @Darren what's the default margin if I may ask and on top of your head ? @uom-pgregorio is `h1, h3 { top-margin : 0; bottom-margin : 0; }' right also? – K4ll-of-D00ty Apr 28 '17 at 16:27
  • @K4ll-of-Dooty it's different depending on browser. – Darren Apr 28 '17 at 16:33

4 Answers4

5

Default styling, the enemy of consistency

Many elements have default margins applied to them by browsers. The problem is that each browser (Chrome, IE etc) applies different amounts of margin.

This makes it hard to achieve consistency between browsers, and consistency is what we need for effective web-design.

CSS Resets to the rescue

Look into the concept of "CSS Resets". Using this approach, and advisably some prebuilt code like this: https://github.com/murtaugh/HTML5-Reset will RESET these values to zero to give you a level playing field.

Then YOU can decide how much margin your headings will have.

The reset you are looking for here - just for this problem - is:

h1, h2, h3 {
 margin: 0px;
}

Then applying your own styles

Then you would build it back up again, like this for example:

h1, h2, h3 {
 margin: 0px;
}

h1 {
 margin-bottom: 20px;
} 

h2, h3 {
 margin-bottom: 10px;
}
<h1> Something </h1>
<h3> Somethings </h3>
<h3> Some other things </h3>

The universal reset

A very simple "total" CSS reset would be:

* {
 margin:0;
 padding:0;
}

But that's not advisable for a number of reasons especially performance: (why) is the CSS star selector considered harmful?

Community
  • 1
  • 1
mayersdesign
  • 5,062
  • 4
  • 35
  • 47
  • got it, thx. I wish i could upvote you, but I cant yet.. Yeah it's unfortunate of browsers wars and inconsistencies, shouldn't they be followin some standard or something.. but i guess it gives each browsers some distinction.. – K4ll-of-D00ty Apr 28 '17 at 16:40
  • Up voted cause you understand importance of removing default styling – Yash Yadav Apr 28 '17 at 16:44
2

The vertical spacing you see is caused by default top and bottom margins of heading elements. It has nothing to do with line spacing (in the CSS sense). To remove the spacing, set the relevant margins to zero. The details depend on the context and desired effects on margins before and after the sequence of headings (which is questionable structurally here – a 1st level heading immediately followed by two 3rd level headings; maybe you meant the second one to be h2?).

For the given markup, assuming that no other effects are desired, and assuming for simplicity that these are the only h1 and h3 elements, you would set

 h1 { margin-bottom: 0; }
 h3 { margin-top: 0; }
 h1 + h3 { margin-bottom: 0; }
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Yehh, i guess you're correct.. wish I can upvote your answer, but I can't yet.. and no I meant the 2nd one to be h3 too, 'h2' is just too similar to 'h1'. Thxx – K4ll-of-D00ty Apr 28 '17 at 16:46
1
h1, h3 {
     margin:0;
}

This will help

Sherin Binu
  • 500
  • 5
  • 14
0

Headings have a margin by default, so yes, you should use CSS to remove the margins.

Agu Dondo
  • 12,638
  • 7
  • 57
  • 68