Padding top is too large compared to what I defined

HTML-CSS
1

I am currently doing the Tribute project, whenever I add padding to the top, it adds more padding than I define. I can add 1px of padding and it will add too much. Please help me figure how to make it only add as much as I define.

HTML:

<main id="main">
  <body>
    <h1 id="title" class="textRight">Steve Wozniak</h1>
    <p class="textRight">Pioneer of the PC</p>
    <figure id="img-div">
      <img id="image" src="https://img.washingtonpost.com/rf/image_1484w/2010-2019/WashingtonPost/2011/07/20/Business/Images/stevejobs-1984-apple-iic.jpg?uuid=w-PkIrMCEeCyjt0GTwV02w" alt="Steve Wozniak and Steve Jobs standing with a third person at some expo">
      <figcaption id="img-caption">
        Steve Jobs, left, chairman of Apple Computers, John Sculley, center, president and CEO, and Steve Wozniak, co-founder of Apple, unveil the new Apple IIc computer in San Francisco, April 24, 1984. (SAL VEDER/ASSOCIATED PRESS)<sup>1</sup>
      </figcaption>
    </figure>
    <section id="tribute-info">
      <h3>A little bit of info on Steve Wozniak</h3>
      <p>
        Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.Interesting text about Steve Wozniak.
      </p>
    </section>
    <p><a id="tribute-link" href="https://en.wikipedia.org/wiki/Steve_Wozniak" target="_blank">Click here</a> to see Wikipedia's entry on "Woz".</p>
    <ol class="footnotes">
      <li id="footnote1">
        Tsukuyama, Hayley (August 25th 2011). <a href="https://www.washingtonpost.com/blogs/faster-forward/post/steve-wozniak-steve-jobs-had-all-the-business-sense/2011/08/25/gIQA72SedJ_blog.html" target="_blank">Steve Wozniak: Steve Jobs had all the business sense</a>. Retrieved October 27th, 2021.
      </li>
    </ol>
  </body>
</main>

CSS:

#main {
  background-color: white;
  border-radius: 25px;
  position: relative;
  left: 15px;
  padding: 1px 10px 20px 20px;
}

body {
  text-align: left;
  background-color: #f5edf7; 
  font-family: Arial, Helvetica, sans-serif;
}

#image {
  width: 1000px;
/*  position: relative;
  right: 40px;*/
}

/*
p, h1, h3 {
  position: relative;
  left: 40px;
}*/
2

Much better if you give us a link to your project (on codepen or wherever). But one thing I can see is that you have <main> wrapping <body> and it should be the other way around.

3

Yes, of course, here’s the codepen https://codepen.io/badmankali/pen/mdMmpRR
Currently it looks okay on the padding part, but it still has only 1px top padding but pads much more.

About the <main> wrapping <body>, user story #1 on the project page states: " User Story #1: My tribute page should have an element with a corresponding id="main" , which contains all other elements."

4

“All other elements” does not include <body>, it means all of the elements inside of the body. Also, in codepen you actually shouldn’t include the <body> tag as codepen puts it in there for you automatically.

Concerning your padding issue, can you tell us exactly what you are doing that is causing this problem?

5

Oh okay, thanks for clearing that up for me.

I have no idea what is causing the top-padding thing.

6

And I don’t know what you are referring to by “top-padding thing”?

Please be very specific about what you consider to be the top padding issue.

7

I am talking about what causes the extra padding above my <h1>-element. There’s currently only a top padding of 1px.

8

You don’t have top padding on the h1, but there is a top margin that is put there by default by the browser. The 1px top padding is on the main. I’m not sure what you are trying to do here? Do you want the h1 to be right up against the top of the white container? Then remove the top margin on the h1.

9

At first it was creating too much space, but now it fits fine according to my wishes. So it just became an issue of me not being able to control it fully. But thanks for figuring it out.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.