Menu
I've never seem to have this problem before, but why don't the H1 and H2 elements align evenly on the left when I specifically apply margin-left to them?
Here is the problem code:
* {
margin: 0;
padding: 0;
}
div h1,
h2 {
margin-left: 1em;
}<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>But when I apply margin-left to the div tag they align perfectly as I would expect?
Here is the working code:
* {
margin: 0;
padding: 0;
}
div {
margin-left: 1em;
}<div>
<h1>Inspector Clouseau</h1>
<h2>Reporting for duty</h2>
</div>I'm not understanding why this happens.
*{
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 you can use appropriate "%". cause of font size output of h1 and h2 tag are different, so by setting margin in % will give desire output,
182
answered Dec 07 '25 17:12
Em values are probably the most difficult values to wrap the ol' noodle around, probably because the very concept of them is abstract and arbitrary. Here's the scoop: 1em is equal to the current font-size of the element in question. If you haven't set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.
https://css-tricks.com/css-font-size/
In your code,
h1 and h2 have different font-size.
When you write the code like this
h1, h2{
margin-left: 1em;
}
It means
h1{
margin-left: 40px;
}
h2{
margin-left: 30px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With