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
It's a dedicated HTML character attributed to "space".
Example:
<div>
<h1>Hello my name is</h1>
<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
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> 
<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>