Question 167459 in Html Question posted in
Some basic documentation can be found here.

Html – Why padding does not center in div?

Easy question for you guys from the beginner: why are there different sizes of top and bottom padding and they are not in the center of div?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Website</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<header class="splash">
  <div class="container">
    <i class="fa-solid fa-user-secret"></i>
    <h1 class="page-title">First paragraph </h1>
    <h2 class="page-subtitle">Second paragraph</h2>
  </div>
</header>
</body>
</html>

body {
text-align: center;
}
.splash {
background: green;
padding: 20px 0; }

.container {
max-width: 1140px;
padding: 0 20px;
margin: 0 auto;
background: red;
}

I thought I would result in equal paddings on the top and bottom but nope.

Tags:

2

Answers


  1. 0

    just by how your code is structured, i can tell that the extra padding you are getting is coming from this header,

    <h2 class="page-subtitle">Second paragraph</h2>

    it’s default margin is overflowing out of your div container.

    you can’t just stack headers like that, try adding this to your css

    .page-subtitle{
  margin-bottom: 0;
}

    if you need me to calrify or if i misundertood what you are trying to do, please let know in the comments

    Login or Signup to reply.
  2. 0

    If I understand your issue correctly, then removing all margin on the h2 then means the padding is equal on both top and bottom for .splash

    body {
  text-align: center;
}

.splash {
  background: green;
  padding: 20px 0;
}

.container {
  max-width: 1140px;
  padding: 0 20px;
  margin: 0 auto;
  background: red;
}

.page-subtitle {
  margin: 0;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Website</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="splash">
    <div class="container">
      <i class="fa-solid fa-user-secret"></i>
      <h1 class="page-title">First paragraph </h1>
      <h2 class="page-subtitle">Second paragraph</h2>
    </div>
  </header>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search