CODEWITHSUNDEEP
htmlcss
hamood56
hamood56

Reputation: 13

How can I add a background to a header in html with a small margin

I have this code

<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Welcome To The National </h1>
<h1 class="Welcome" style="background-color: #F0E68C;" style="margin-left: 20px;" style="margin-right: 20px;" style="margin-top: 100%;">Honor Society Website!</h1>

It should add a background just behind the text but instead it looks like this how can I make it so that both texts have the same background but not take up the entire page and have no white space between the lines.

Upvotes: 1

Views: 46

Answers (1)

ILally
ILally

Reputation: 339

Use display:table; and have no top & bottom margin and add padding to the first h1.

h1
{
  display:table;
  background-color: #F0E68C;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
}
<h1 class="Welcome" style="padding-bottom: 10px">Welcome To The National </h1>
<h1 class="Welcome">Honor Society Website!</h1>

Upvotes: 1

Related Questions