Hi, @mav, hope you are doing well.
the % and vw
So, imagine this scenrio:
html:
<body>
<section class="container">
<div class="card"></div>
</section>
<body>
css case 1:
.container {
width: 1100px
margin: 0 auto
}
.card{
width: 100%
}
Look that in this case ".card" style the "width=100%", the "card" size will be 1100px, respecting the size of his parent "section" (father element). If you open in a tablet screen with 768px, the size of the elements will continue 1100px (bigger than the screen and will create a scroll bar)
css case 2:
.container {
width: 1100px
margin: 0 auto
}
.card{
width: 100vw
}
Here the ".card" style the "width=100vw", then his size will depend on the size of the screen. if you open now in the same tablet screen 768px, the container will continue having the 1100px, but the card now have 768px independent of his father.
The logic is the same for vh. The problem of using vh and vw is when you have screens too big that the elements are dispersed; or the screen is too small that the elements become distorteds
margin and padding
So if you look in a objective and practical way, they are almost the same effect, the main difference is, the margin affect the outside of the element, the padding affect the inside of the element:
html:
<h1>Hi</h1>
<p>I'm web developer</p>
css:
h1 {
font-size: 44px
line-height: 44px
margin:10px
}
p {
font-size: 16px
line-height: 16px
margin: 10px
}
In this example, the distance of the text "Hi" and "I'm..." are 10px. But, and if I change the CSS?
h1 {
margin:10px
}
p {
padding: 10px
}
Here, the distance of h1 and p, still 10 px, BUT the "Hi" will be 20px of distance from "I'm...". This is because the p element stil at the same place, but now the p has a distance of 10 px from his border until the text element inside it. And, in the last case:
h1 {
padding:10px
}
p {
padding: 10px
}
Here, the "Hi" will have the same 20px of distance from "I'm...", but the distance between the elements h1 and p is 0px. What it affects? if you add a border to the h1 and p for example, their borders will collide.
So that's all, my friend. Hope I could help you.
