0

im learning css with w3schools, now I am trying to design a responsive navigation bar from this https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_responsive the problem is that apparently .content needs to specify the padding to get the layout I really want.

This is my layout without padding:

enter image description here

And this is with the padding padding: 1px 16px;:

enter image description here

My question is, how did w3schools know that adding a padding would solve that problem?

I have tried to see with the element inspector, if any padding or margin is added to the document. but chrome doesn't highlight anything. so without the tutorial I would never have known how to fix it. Before, I only assumed that padding was used to create a space between the content and its container, but now it seems that padding does something else.

Raphael
  • 107
  • 1
  • 3
  • there's no issue here at all, by definition padding adds a space between the content and the border of the element while margin adds a space outside the border and the rest of the elements. knowing that you define padding WHEN you want that space.. otherwise the defaults padding is used "usually zero" but it's really up to the browser. so it's always a good practice to explicitly define it. – Maher Fattouh Aug 08 '20 at 20:50
  • also devtools does not highlights padding and/or margin when the value of the property is set to zero or none since there is nothing to highlight – Maher Fattouh Aug 08 '20 at 20:52

1 Answers1

2

The padding set to zero "disables" the margin-top set for h2 at the beginning of the content div. By setting top padding to 0, you force the content of the div to start at the top of the div, regardless of the top margin.

enter image description here

Will
  • 1,123
  • 1
  • 9
  • 22
  • now I see the problem. but now I have more questions. why ul.sidenav element has the same "top margin"(visually) as h2? why if I set a border to .content, .sidenav moves to the position I want, even when I don't define a top: 0? – Raphael Aug 08 '20 at 22:26
  • 1) It doesn't. `.sidenav` is a child element of the same parent as h2 and position is set to fixed with no specified top (default value: `auto`), so it'll go where `.content` starts. 2) Not sure what you mean by ".sidenav moves to the position I want" – Will Aug 09 '20 at 02:09