Home > Blockchain >  Space after h1 text
Space after h1 text

Time:10-27

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>

CodePudding user response:

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..

CodePudding user response:

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

CodePudding user response:

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

CodePudding user response:

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>

CodePudding user response:

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>

  • Related