Don't understand why this is wrong? Does padding work like I described?

Essentially, I am confused about padding.

#teal {
background-color: #A8D0DB;
padding: 0 50px;
margin: 100px;

#purple {
background-color: #414073;
padding: 50px;
margin: 50px 100px;

The above is the solution. So I am wondering does a padding of say 50px 0px mean 50px is applied to both top and bottom (giving 100px overall) or 50px combined?

I am so bad at coding that I don’t know how to test this out. Thanks to anyone that can help :frowning:

Hello @board1774168228. From what I can remember, when you have a rule like:

padding: 10px 102px;

The 10px is for the top and bottom, and the 102px is for the right and left. Here is some reading about padding.
I hope this helps!

1 Like

I believe it applies to both top and bottom…

1 Like

Yes, as @codeneutrino and @8-bitgaming have said, the padding property in this instance works like this:

/* padding with a single value
   all sides receive same padding */
padding: 25px;

/* padding with two values
   first value is top/bottom, second value left/right */
padding: 25px 15px;

/* padding with four values
   each value is a different side, clockwise from top
   so: 5px top, 10px right, 15px bottom, and 20px left  */
padding: 5px 10px 15px 20px;

Remember as well that padding is spacing inside the element - it makes the element’s box larger - whereas margin is spacing around the element, increasing the “gap” between it and it’s sibling elements.

If you now understand how to correctly apply padding, I would encourage you to reset that exercise and re-attempt it yourself. :slight_smile:

1 Like

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