0
229
ViewsCSS box model issue
I have been trying to figure out the CSS for one of my projects.
I have a class 'header-container' applied to the div container which on checking is as follows -
I have a query on why are the contents of the 'wrapper' div which is the child of 'header-container' div, not entirely inside the content box (i.e. the blue highlighted box) and can be seen in the orange part. Please find the CSS for the wrapper div below -
Why is the element CSS not following the CSS Box Model? and how can it be resolved?
Project is published on - https://surijatin.github.io/covid-second-dose/
1 answers
Answer question0
The answer is in your image:
.header-containerhas a specified height of 2vh. That's the height limit.So the text in
.wrapperis simply overflowing that fixed height.
The orange sections are the 2vh top and bottom margins you've set.
Remove the height: 2vh, or switch to min-height: 2vh, and the problem should be resolved.