How can I position items/buttons at the top of my page without there being white space between the top of my page and the items?

Question

I'm trying to make a bar of buttons at the top of my webpage that line up and cover the entire top of the screen. It's mostly working fine except there is always a white space between the top and left of the buttons. I've tried using multiple different kinds of CSS tags to remove the white space. Position and top/left have worked for singular buttons but so far, I haven't found anything that could position all of the buttons with just one or two classes or IDs. Here's what I have so far:

HTML:

<div class="topButtons">
      <a href=#><button class="buttons"><i>Button 1</i></button></a> 
      <a href=#><button class="buttons"><i>Button 2</i></button></a> 
</div>

CSS:

.topButtons .buttons {
    padding: 2.5% 10%;
    background-color: #04AA6D;
    border: none;
    float: left;
    transition-duration: 0.4s;
    size: 2.5% 10%;
}

1

html, body { margin: 0; } – Johannes Dec 17 '21 at 19:43

score 0 · Accepted Answer · answered Dec 17 '21 at 19:45

Browsers have default settings for some CSS properties.

In particular there may be default settings for margin.

Try putting:

* {
  margin: 0;
  padding: 0;
}

at the top of your CSS stylesheet and then if you want them, add them explicitly to elements as you go along.

How can I position items/buttons at the top of my page without there being white space between the top of my page and the items?

1 Answers1