'When the font size is changed, the margin/padding above and below the div become asymmetrical [duplicate]

I'm trying to make the div symmetrically spaced but when I increase the font size to 200% or 32px, the lower padding, which is of 3em and the <body> tag's margin of 3 em gets mismatched due to it getting longer in the bottom The screenshot

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body style="margin-left: 5px;
margin-right: 5px;
margin-top: 3em;">
  <div style="text-align: center; padding-bottom: 3em; font-size:32px;">Lorem ipsum dolor sit amet</div>
  <div style="font-size: 55px; background-color: #000000; color: #FFFFFF;">Lorem Ipsum Dolor Sit Amet</div>
</body>

</html>
htmlcsspaddingmargin


Solution 1:[1]

As you have used em and em is related to font size here is a definition em: Relative to the font size of the element (2em means 2 times the size of the current font)

As you make changes by em it will affect the padding and margin based on that

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gulshan Prajapati

Related Questions