I am trying have a spacing something like this
As you can see the space between white outline and background image.
Instead of background-image i have background-color and i have .container class white has some border background. I want .container class to have 10 px from top and bottom and 20px right and left.
I have tried margin: 10px 20px with container, but it doesn’t give desired results.
https://codepen.io/DVGY/full/VwYGbaR
Challenge type tribute page
Hello DVGY,
EDIT
Sorry, I realized I should give you a hint but let you figure it out.
Currently, the height of the .main-content element is 98px, and the height of .content is also 98px. When you add margin to .main-content, its total height increases, pushing both of them away from the previous section and resulting in the white space that you don’t want. Try moving the .container relative to the .main-content by applying something to .main-content (kind of the opposite of margin).
I tried position:relative in .container and top 10px it works but this is not what i want. I am not getting what do you mean by opposite of margin?
You can use padding on main-content.
Either creating all the space needed using padding on main-content, or just giving main-content 1px padding and then observe how that changes the way the margin on container affects the surrounding.
Mr lasjorg it works very well. What is the concept behind it ?? does .container behaves as content of .main-content or is there something i should know ?
Thanks
Padding on a container will push its content inward. It will also give the content inside a container something to push outward on to with its margin. Check out MDNs articles on the box model.
BTW, you may also want to add box-sizing: border-box to your universal selector to get more intuitive control of element sizing.
