It’s not CSS3, it’s you.

A beginner’s solution guide to small details and easy fixes.

If you’re new to Web Development you’ve probably found yourself stuck on seemingly “simple” problems for a long time. You’ve tried turning to Google and every CSS property/value you can think and of but still nothing works! How? Obviously, the only reasonable answer is that CSS3 is defective and it’s not your fault. Well…I’m sorry to say, but it’s not defective, you just haven’t narrowed down the problem yet!

So let’s dive into some common Web Development issues that everyone faces at one time or another.

Where is this extra padding and margin coming from and how to I make it go away?

Use your browser’s developer tools! Dev tools give you the ability to zero in on all of your HTML & CSS components. Hover over the container you’re trying to style and see which element has padding or margin by default. Once you’ve found the culprit, go ahead and get rid of it!

Margin? Padding? I’m sorry for yelling at you…Please come back!

“Why won’t margin-top work? CSS is for sure, definitely broken.” Nope! If you’re margin or padding isn’t working it’s likely going to be because of the following reasons:

  1. You’re trying to apply those properties to an inline item — change the property to display:block
  2. Your floated elements are making the parent collapse! — clearfix/clear: both; or overflow: auto;, should solve this! *Overflow will work for IE browsers.

Margin: 0 auto isn’t working either!

It’s OK, just take a deep breathe! Margin: 0 auto can only be applied to block elements. If you are working with a block element and you still can’t get it to position in the centre than make sure that you have defined a width.

Everything I’m doing is right, computers are stupid.

It’s important to remember is that computers aren’t wrong and that Web development can be a great exercise in patience. If you’re like me, you’ve spent a lot of time trying to solve something where the solution was so simple you want to cry. So here’s a list of things that I wished I had checked sooner:

  1. A missing semi-colon
  2. Was save pressed? Was it pressed on the html page that you just had to update too? No? Well…
  3. Something that is commented-out that you need

Hope this helped!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.