CODEWITHSUNDEEP
htmlcss
Thor Solutions
Thor Solutions

Reputation: 49

Space after h1 text

I have two h1 side by side and I want a space between the two textes.I tried it with just adding space with the spacebar, but it doesn´t work.

header div {
  display: flex;
}
<header>
   <div>
      <h1 id="heading1">Hello my name is </h1>
      <h1 id="heading2"> Paul</h1>
   </div>
</header>

Upvotes: 0

Views: 869

Answers (6)

HackerFrosch
HackerFrosch

Reputation: 364

If you want to display two h1 elements in the same line, but color them different or anything like that, just use one h1 element and a span element. Per defintion, every html-page should just have one h1 element, because it should be used as a page-title.

Also, if you dont need the id's for js or something else, just select them via css.

Here's a full example:

#heading span:nth-child(1) {
   color: green;
}

#heading span:nth-child(2) {
   color: red;
}
<header>
    <div>
        <h1 id="heading">
           <span id="first_heading">Hello my name is </span>
           <span id="second_heading">Paul</span>
        </h1>
    </div>
</header>

Upvotes: 0

Saad Rehman
Saad Rehman

Reputation: 79

There are multiple ways to do it. One of them is:

#header {
  display: flex;
  gap: 1vw;
}
<div id="header">
  <h1 id="heading1">Hello my name is </h1>
  <h1 id="heading2">Paul</h1>
</div>

Upvotes: 0

user11877521
user11877521

Reputation: 331

Remember h1 is a block level element. It will always be in one line. To bring them in same line, change display to inline-block like so.

h1 {
  display: inline-block;
  margin: 0;
}
<div>
  <h1>Hello my name is</h1>&nbsp
  <h1>Paul</h1>
</div>

Upvotes: 0

Tushar
Tushar

Reputation: 1306

trying adding a margin to one of your h1. And please don't use two h1 on a single page.

Upvotes: 0

tomleb
tomleb

Reputation: 2525

Try using &nbsp;
It's a dedicated HTML character attributed to "space".

Example:

<div>
  <h1>Hello my name is</h1>&nbsp;
  <h1>Paul</h1>
</div>

You can also put it inside of HTML tags, like the <h1>, but I personally prefer it outside of it.
I also personally prefer using &nbsp; in general since it's a more explicit way to symbolize "space", whereas implicit spaces (" ") sometimes get "lost in translation", so to speak..

Upvotes: 2

Lo&#239;c
Lo&#239;c

Reputation: 41

If you use flex you need to read the docshttps://developer.mozilla.org/fr/docs/Web/CSS/flex

and understand how the layout works. In your case, the div take 100% of the width and each h1 is align left by default. You can set

justify-content: space-between; on the div by example, for more see this

Upvotes: 0

Related Questions