Newbie CSS Struggles are REAL!

Hello guys, I’m new here and beginning my web development journey – so I apologize if this is a dumb question – I was just wondering if anyone could help me wrap my head around a few concepts or point me towards any resources that would help. I’m really struggling with some aspects of CSS; Specifically, I’m having trouble understanding positioning elements using the [inline-block] and/or [float] commands as well as using padding and margins to manipulate objects on a page. I wasn’t quite able to follow Codecademy’s instructions on these early concepts so I am a little embarrassed by not grasping them. Could you please help me?

The thing to do is create the most basic page you can, and study one element on the page. A square.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>One Element Study</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 5px solid blue;
      background-color: straw;
    }
  </style>
</head>
<body>
  <div>

  </div>
</body>
</html>

Save the file and open in a browser. The window size doesn’t matter, so long as it is bigger than the square.

First, examine how to position the element. There are two ways.

margin

and,

top, right, bottom, left

The latter can all be added to margin since they act upon the box as a whole, including the margin.

In the style sheet above, add another declaration to the div selector rule:

margin: 20px 20px;

Save and refresh. Notice how the box moved down and right. We may not see the other two margins, but they are there. Now add these declarations, as well,

top: 30px;
left: 30px;

Save an refresh. Now what do we see? The margin is still there, but we have clear space about half an inch on top and on the left.

That’s the basics of positioning. Other methods will surface in time.

Now let’s study the effect of padding, the bane of every learner starting out with HTML/CSS. Pay careful heed to how and where you use it, is all one can say. Add this declaration,

padding: 25px;

Save and refresh. See any difference?

1 Like

I forgot what inline-block does. float moves an element around the page. Here is an image to help you understand padding, margin, etc:

image

And you can always use documentation to look at challenging topics. You can use CC docs or MDN web docs and many others.

1 Like

I’m finding CSS to be near impossible to troubleshoot without an expert literally over your shoulder looking at every thing you’re doing. This is maddening.