I don't understand how padding works exactly,


#1



https://www.codecademy.com/en/courses/web-beginner-en-6merh/1/6?curriculum_id=50579fb998b470000202dc8b


Not and issue I can wright the code I just don't understand the theory

This is not a code issue, I can follow the steps and affect the div by using the correct CSS syntax but I don't understand the theory behind it. Specifically I don't understand what reference means in the following paragraph.

When you give CSS a positive padding or margin value, it puts that space between the element and its reference: for instance, if you have a <div> and you give it a margin-left of 20px, it puts twenty pixels between the left margin of that <div> and the side of the screen. This effectively moves the <div> twenty pixels to the right.

I also don't exactly understand what it means about the margins but I get the general idea. If you add 20px of space to the margin it does make sense it would move in this case the div. What bothers me is where it says it puts space between the element and it's reference, what reference? I tried google what the definition of reference means in this sentence and in html and css in general but all I kept getting was references of syntax for html and css.
I must apologize if this is a stupid question but I am new to coding and I don't understand the complete terminology yet.


#2

Hello @biblio1,

In this case, the reference of the div is the left margin of the page, or the HTML document itself. You can alter it, read this link for more information . Hope this was helpful...


#3

Imagine everything in html as a box, and each box has contents on the inside. Now say that you want to control how much space there is between the contents in the box and the sides of the box. This is where padding takes place. When your using padding then you are basically saying ok I want the contents inside of this box to be this much spacing away from the sides of the box surrounding it.

I hope that this concept was as clear as mud(clearer in fact :slight_smile: ) and that you now understand padding better.


#4

Well, good you take the time to make a question if you don't understand it. Positioning and margin is very important.

reference refers to its parent, if i for example have the following code:

<body>
  <div></div>
</body>
div { margin-left: 20px }

div puts 20 margin between div and the side of the screen (or body actually), if you have a nested div, and you give the inner div a margin, it puts 20px between the inner and outer div

reference is its parent. everything is positioned in relation to its parent (with the exception of absolute and fixed elements)


#5

Thank you so much that was incredibly helpful and cleared my confusion up. I felt a bit silly for having to ask so thanks for answering in a kind way as well I really appreciate it. Cheers Biblio


#6

Thanks for clearing that up it is definitely clear now. Clear as mud and clearer in fact. Thanks for the help. Cheers Biblio


#7

Thank you so much that cleared up the reference issue for me. I suspected it was something like that but without anyway to confirm I did not want to assume. I am so relieved I can continue with my course now. I was moving along quite swimmingly until now, and I was quite frustrated with my inability to figure this one out. So thank you and the code academy community for being such a helpful resource. Cheers Biblio


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.