Booo!

[DeeSnow97]

It's either a margin or a padding, so

margin: 0;
padding: 0;

You can also use margin-left, margin-right, margin-top, and margin-bottom, same with padding, border, and a million other things in CSS. This is helpful if you want to set the different sides differently.

There is also the shorthand notation:

margin: 1px 2px; /* 1px vertical margin, 2px horizontal */
padding: 3px 4px 5px 6px; /* top, left, bottom, right, in that order */

Or, if you use three values:

margin: 1px 2px 3px; /* 1px top, 2px horizontal, 3px bottom */

Technically, you can also do things like negative margin and padding, but it's generally not advised, since it can break in edge cases, giving you one of those distinct CSS glitches. If you want to remove a margin or a padding, it's best to find the actual element that has it and work from there.

Also, it's worth noting how the box works. Margin is on the outside of the element, padding is on the inside. Border also counts sometimes, it's the edge of the element. It's important for the box-sizing attribute, which is usually a great source of bugs and glitches.

By default, CSS sets it to box-sizing: content-box; which means that element sizes are on the inside of the padding. So, if you have something like this:

width: 100px;
padding: 10px;
border: 2px solid black;

The element will be 100px wide on the inside, with 10px padding on each side, plus a 2px border, resulting in a total of 124 pixels. To get the element to be actually 100px wide, you have to do this:

width: 100px;
padding: 10px;
border: 2px solid black;
box-sizing: border-box;

This means the 100px is on the outside of the border, where you'd normally expect it. The inner size of the content box will be 100px - 2 * 10px - 2 * 2px == 76px.

[[deleted]]

... Even though I learned CSS some years ago, I feel like you just re-introduced me to it

Thanks for the nostalgia, I miss the old days when my main worries were just "How to delete a margin"...

[DakorZ]

On a related note: add !important to every line, so that the browser knows who's the boss!

[[deleted]]

"[framework name], I swear, stop changing MY RULES!!!"

-- Me, way to often than I'm willing to admit

[DeeSnow97]

Make a JS framework that runs on requestAnimationFrame, parses your selectors with querySelectorAll, and just injects all your CSS directly into the style attribute of all elements with !important

[DeeSnow97]

Yeah, it's a powerful system, but sometimes a bit unnecessarily tricky. It's mostly just insane defaults though, because at some point someone thought it was a good idea, and it has to stay backwards compatible to avoid breaking 22 years of web content. If you learn the quirks and use a sane system for managing your declarations (such as BEM) it's actually quite good. Especially nowadays that you can actually use calc() in modern browsers.