Incorporating left margin to headings H1 and H2

Question

Incorporating left margin to headings H1 and H2

It's baffling to me that the H1 and H2 elements don't align evenly on the left when I add margin-left to them. This has never been an issue for me before.

Check out the code with the problem:

* {
  margin: 0;
  padding: 0;
}

div h1,
h2 {
  margin-left: 1em;
}

<div>
   <h1>Inspector Clouseau</h1>
   <h2>Reporting for duty</h2>
</div>

Surprisingly, when I apply margin-left to the div tag, they align perfectly as expected. Here's the correct code:

* {
  margin: 0;
  padding: 0;
}

div {
  margin-left: 1em;
}

<div>
    <h1>Inspector Clouseau</h1>
    <h2>Reporting for duty</h2>
</div>

I just can't wrap my head around why this discrepancy exists.

html css

Answer 1

Answer №1

*{
margin: 0;
padding: 0;
}
div h1,h2{
margin-left:3%;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>

Instead of using em, it is suggested to use appropriate "%" values. Due to different font sizes in the output of h1 and h2 tags, setting margins in % will achieve the desired output.

Answer 2

*{
margin: 0;
padding: 0;
}
div h1,h2{
margin-left:3%;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>

Instead of using em, it is suggested to use appropriate "%" values. Due to different font sizes in the output of h1 and h2 tags, setting margins in % will achieve the desired output.

Answer 3

Answer №2

The concept of <code>em values can be quite challenging to understand, as they are abstract and arbitrary by nature. Essentially, 1em is equal to the current font-size of the element in question. If no font size is specified on the page, it defaults to 16px, making 1em equal to 16px. However, setting a font size of 20px on your body would mean that 1em becomes 20px.

For more information on CSS font sizes, visit this article.

Within your code, h1 and h2 have different font sizes. When applying a style like this:

h1, h2{
  margin-left: 1em;
}

It translates to:

h1{
  margin-left: 40px;
}
h2{
  margin-left: 30px;
}

Answer 4

The concept of <code>em values can be quite challenging to understand, as they are abstract and arbitrary by nature. Essentially, 1em is equal to the current font-size of the element in question. If no font size is specified on the page, it defaults to 16px, making 1em equal to 16px. However, setting a font size of 20px on your body would mean that 1em becomes 20px.

For more information on CSS font sizes, visit this article.

Within your code, h1 and h2 have different font sizes. When applying a style like this:

h1, h2{
  margin-left: 1em;
}

It translates to:

h1{
  margin-left: 40px;
}
h2{
  margin-left: 30px;
}

Answer 5

Answer №3

When comparing the font-size property of h1 (set to 2em) and h2 (set to 1.5em) in Chrome, you may notice that applying a margin-left of 1em results in different pixel values for h1 and h2.

* {
  margin: 0;
  padding: 0;
}

div:not(.second) h1, div:not(.second) h2 {
  margin-left: 1em;
}

div.second {
  margin-left: 1em;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <div>
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
    <br/>
    <div class="second">
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

</html>

Answer 6

When comparing the font-size property of h1 (set to 2em) and h2 (set to 1.5em) in Chrome, you may notice that applying a margin-left of 1em results in different pixel values for h1 and h2.

* {
  margin: 0;
  padding: 0;
}

div:not(.second) h1, div:not(.second) h2 {
  margin-left: 1em;
}

div.second {
  margin-left: 1em;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header>
    <div>
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
    <br/>
    <div class="second">
      <h1>Inspector Clouseau</h1>
      <h2>Reporting for duty</h2>
    </div>
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>

</html>

Answer 7

Answer №4

Your CSS is correct, but one thing to note is the use of the em unit in your styles.

So what exactly is the em unit and how does it work? Find out below:

"The em unit is relative to the font-size of the element (e.g., 2em means 2 times the size of the current font)"

This means that since the font sizes for h1 and h2 are different, using em will create different spacing. You can test this by applying h3 and observing the results.

Answer 8

Your CSS is correct, but one thing to note is the use of the em unit in your styles.

So what exactly is the em unit and how does it work? Find out below:

"The em unit is relative to the font-size of the element (e.g., 2em means 2 times the size of the current font)"

This means that since the font sizes for h1 and h2 are different, using em will create different spacing. You can test this by applying h3 and observing the results.

Incorporating left margin to headings H1 and H2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Increasing the height of child elements beyond the boundaries of their parent container

Launching a webpage programmatically

Problems with select box rendering in Internet Explorer with Materialize CSS

Eliminate the preset padding on the left and right sides of the container-fluid in Bootstrap 5

What is the best way to use a computed property as a style value for a component in Vue.js?

There seems to be an issue with the MySQL query, and I'm unsure of the cause

Design a vibrant call-to-action button that enlarges with a mouse hover

Apply a dark overlay effect to a div when hovering over it

The variable $ jQuery is not defined in this context

Disabling comments is creating problems with the appearance of Wordpress pages

Progress bar displaying during Ajax request

What is the best way to make an exit pop up disappear when clicking on any area?

code snippet: using PHP to control checkbox status depending on MySQL data

Automatically changing the URL of Vue image assets

Using Javascript math to create a backdrop effect by drawing rectangles around multiple other rectangles

Steps for launching a "Bootstrap popup window" with changing parameters

Flexbox Alignment Problem with Mixed Text and Image Elements

Navigating to specific location on page following addition of dynamic elements

Constantly centered div

Sequentially loading Bootstrap columns as the page loads