How I can remove the space between the elements in html

Question

How i can remove the space between strings "Text 1" and "its simple"? I need to create whitespace in only 10 pixel, i.e. via margin-top: 10px;. But when i use margin-top: 10px;, total space is 10 pixel + shift.

In my opinion, the white space are formed directly by the margin of the font. With what element can i change the size of this whitespace?

 * { box-sizing: border-box; margin: 0; padding: 0; } .title { font-family: Roboto; font-size: 41px; font-weight: 900; text-transform: uppercase; color: #f9bf3b; text-align: center; } .simple .title_big { font-family: Roboto; font-size: 80px; font-weight: 900; text-transform: uppercase; color: #000000; text-align: center; }

 <h1 class="title">Text 1</h1> <div class="simple"> <h2 class="title_big">its simple!</h2> <div class="line"></div> </div> <h2 class="title">Text 2</h2>

Kameron · Accepted Answer · 2022-06-02 18:05:53Z

Set your line-height equal to 1 on the respective classes. This is equivalent to line-height: 100%;, meaning 100% of the font size for that element, not 100% of its height.

* { box-sizing: border-box; margin: 0; padding: 0; } .title { font-family: Roboto; font-size: 41px; font-weight: 900; text-transform: uppercase; color: #f9bf3b; text-align: center; } .simple .title_big { font-family: Roboto; font-size: 80px; font-weight: 900; text-transform: uppercase; color: #000000; text-align: center; } h1.title, h2.title_big { line-height: 1; }

<h1 class="title">Text 1</h1> <div class="simple"> <h2 class="title_big">its simple!</h2> <div class="line"></div> </div> <h2 class="title">Text 2</h2>

FortyGazelle700 · Accepted Answer · 2022-06-02 17:46:38Z

Is this what you happened to be looking for? I used a negative margin in the .simple .title_big class (-15px to be exact) to remove the margin that was in the text to add less whitespace then there was before. But still leaving you with some.

 * { box-sizing: border-box; margin: 0; padding: 0; } .title { font-family: Roboto; font-size: 41px; font-weight: 900; text-transform: uppercase; color: #f9bf3b; text-align: center; } .simple .title_big { font-family: Roboto; font-size: 80px; font-weight: 900; text-transform: uppercase; color: #000000; text-align: center; margin: -15px 0; }

 <h1 class="title">Text 1</h1> <div class="simple"> <h2 class="title_big">its simple!</h2> <div class="line"></div> </div> <h2 class="title">Text 2</h2>

Thank you. Its a variant, but what with other fonts (sizes)? How i can remove spaces to other elements, without calculate this size?

Collectives™ on Stack Overflow

How I can remove the space between the elements in html

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related