Removing margin for specific elements with CSS/HTML

Question

Currently i have a sticky div class to display a heading for my site, however when not "sticky" (when the user is currently at the top of the screen) it has a margin to the left and top, which is not desired: Page currently. I am aiming to have a "smooth" transition between the sticky and the browser. This describes what i want nicely.

My code currently:

html,
body {
  background-color: white;
}

div.sticky {
  /* Sticky bar for  */
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  background-color: #6cb0f9;
  width: 2000px;
  height: 100px;
  margin: 0;
  text-align: center;
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <div class="sticky">This is my sticky div class!</div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

</html>

Whatever i set "margin" to it does not change the margins on either side, even upon specifying "margin-left" and "margin-top" to 0, placing this element outside of body does not work either. A CSS or HTML solution would be prefered.

Is it padding instead of margin? – gph Jul 01 '20 at 04:10 — gph, Jul 01 '20 at 04:10

Manjuboyz · Accepted Answer · 2020-07-01T05:13:25.160

Add margin:0;to the body.

body {
  background-color: white;
  margin: 0;
}

div.sticky {
  /* Sticky bar for  */
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  background-color: #6cb0f9;
  width: 2000px;
  height: 100px;
  text-align: center;
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <style>

  </style>
</head>

<body>

  <div class="sticky">This is my sticky div class!</div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

</html>

That works perfectly, i just modified the padding-top to 0px, thanks a heap — GhostDog98, Jul 01 '20 at 04:58
if you don't want that padding at the top then, no need to make `padding-top:0;` you can just remove that code, it should be fine. I have modified my code you can check. — Manjuboyz, Jul 01 '20 at 05:13

score 0 · Answer 2 · edited Jul 01 '20 at 12:24

You could try this css:

body {
  margin: 0;
  padding: 0;
}
div.sticky {
  width: 100%;
}

body {
  background-color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body >  p {padding: 0 20px ;}
div.sticky {
  /* Sticky bar for  */
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  background-color: #6cb0f9;
  width: 100%;
  height: 100px;
  margin: 0;
  text-align: center;
  font-family: "Comic Sans MS", "Comic Sans", sans-serif;
  font-size: 30px;
  line-height: 100px;
}

<body>

  <div class="sticky">This is my sticky div class!</div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

</body>

Removing margin for specific elements with CSS/HTML

2 Answers2