How to change h2 span text boxes into rectangle shape?-CodePudding

As the title says i am trying to make two h2 and span text boxes have a rectangular shape for a website and i need help.

mine's looks like this:

but i want them to look like this:

h2 {
  position: fixed;
  top: 20rem;
  left: 11rem;
  text-align: right;
  font-size: 1rem;
}

h2 span {
  background-color: #556272;
  color: #fff;
  display: inline-block;
  text-align: center;
  font-style: normal;
  padding: 2rem;
}

h2 span:first-child {
  width: 200px;
  height: 44px;
  font-size: 20px;
}

h2 span:last-child {
  transform: translate(-1rem, -1rem);
  width: 200px;
  height: 44px;
  font-size: 15px;
}

<h2>
  <span>Web</span> <br />
  <span>Development</span>
</h2>

CodePudding user response：

Just my take, but it seems like it'd be easier and more readable to do something like this:

h2 div { 
  /* various styles for background and colors */
  background-color: #ccc;  /* just an example */
}

h2 div.first-line {
  display: block;
  max-width: 200px; /* or whatever */
  margin-left: 200px;

}

h2 div.second-line {
  display: block;
  max-width: 200px; /* or whatever */
  margin-left: 100px;
}

<h2>
  <div class='first-line'>Web</div>
  <div class='second-line'>Development</div>
</h2>

CodePudding user response：

Removing Defauilt styling

Headers by default have more margin on the top. You just want to normalize your styling.

html, body {
  margin: 0;
}

This should do the trick, as it removes all margins from all elements. Just put it at the top of your stylesheet. But there are also some normalize.css defaults out there that remove all unwanted default styling.

You can also change the styling on the element itself, or remove all styling from it:

h2 {
  all: unset;
}

But usually removing all default styling like this is not what you want. I'm just saying it's an option.

I usually just start styling by starting from something like this:

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  background-color: #eee;
  /* Some other defaults, like maybe flex attributes depending on your layout. */
}

Tip: When using the browser development tools, you can inspect each tag and see all the styling it has. Try changing / removing things in there, until you've found the culprit of your issues.