The CSS Box Model
How not knowing this concept may cost you a job!
Despite being a fundamental concept in web development, a great number of software engineers have no clue as to what the box model is or how it works. One hiring manager once revealed that they purposely like to ask applicants to define it on interviews and make it one of the determining factors for hiring front-end engineers. Not understanding this concept may cost many developers a job that they could’ve landed otherwise. The good news is that it is quite a simple topic that doesn’t take much to understand.
The box model defines the structure of HTML elements on webpages
The box model describes the structure of webpages. Every webpage has different parts or boxes that form the skeleton of that page and every HTML element on it. These boxes are commonly used to define the layout of those elements. Essentially, four boxes wrap around every HTML element: margin, border, padding, and content.
- The margin is the outermost box of the box model. It wraps around the border and is transparent by default.
- The border is the next layer, after the margin, that wraps around the padding of HTML elements. Some elements have visible borders and others don’t.
- The padding is the box that wraps around the content and is also transparent by default.
