Css change spacing between two headers

user_15167753 0
Viewed 372

At the moment I am trying to change the distance between the two headers but I can't seem to remember how.

my css for the header is

.header {
  font-family: "Karla" !important;
  color: #4e4e4e;
}

and part of the html specific to the header is

    <div class="header">
      <h1 style="display: inline-block">Text 1</h1>
      <h1 style="display: inline-block">Text 2</h1>
    </div>

the two headings are very close to each other and I would like to separate them more but I can't remember how. I have tried using margin and padding but it doesn't seem to be spacing them out.

example of headers

The entire website looks like enter image description here

Thanks

css html
3 Answers

I would recommend the following CSS:

.header h1 { margin: 0px 10px; }

Change the second value (10px) for more horizontal space. This will also keep the headers in the center by adding space for each header on both sides: left & right.

My recommendation would also be to remove the style attribute from the h1 elements and add it to the CSS above. The final CSS would be:

.header h1 { 
    margin: 0px 10px; 
    display: inline-block;
}
user_30591800

You can add these three options and play with it:

.header {
  font-family: "Karla" !important;
  color: #4e4e4e;
  line-height: 30px;
  margin:0px;
  padding:0px;
}
user_153681670

Well out of many ways to do that I would suggest you to add margin to your h1 tags. You can either add margin right to the first h1 tag or you can add margin left to the second h1 tag.

<div class="header">
  <h1 style="display: inline-block; margin-right: 2rem;">Text 1</h1>
  <h1 style="display: inline-block">Text 2</h1>
</div>

The above given HTML code snippet would do the required and if you wish to increase the space more, just change the value provided for margin right in the first h1 tag.

user_77329860
Related