How would you implement the basic layout components of the box model in CSS? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 20

How would you implement the basic layout components of the box model in CSS?

Can you give an example?

8th May 2018, 1:58 PM
//Lana Wilson
//Lana Wilson - avatar
3 Answers
+ 5
The box model is really just a series of directives that define how the various layout specifications of an element interact with one another. The components covered by the box model are:    1. document canvas    2. margins    3. borders    4. padding    5. element widths and heights    6. child element properties    The basic rule is that the computed width or height of an element is equal to: margin + border + padding + (width|height) In many cases the width and/or height will be set to its default value of auto, meaning that the canvas area put aside for content is equal to: available_canvas − margin − padding − border In such an equation, available_canvas is itself a discrete (if often auto-computed) value, less the amount of margins, borders and padding. This number is most important for the width of elements, because width calculation errors on the part of a designer will have the undesirable result of causing a horizontal scroll bar to appear in the browser window. Additionally, browsers always place elements at the left margin of the browser canvas that would otherwise overflow beyond the right margin of the browser window, unless instructed to do otherwise. Consider the following style sheet rule: #myLayoutColumn {   width: 50em;   margin: 1.5em auto 1.5em auto;   border: .1em;   padding: .9em; } one can expect #myLayoutColumn to center itself within its container element, whether that container is body, or something created by the production team. Furthermore, if the activation of “strict mode” (through the use of an appropriate !DOCTYPEdeclaration) causes the W3C box model to be used, one can also expect the computed non-marginal width to be: .1em + .9em + 50em + .9em + .1em = 52em In screen media the browser will then take this value, round all of the values separately to the nearest pixel, and render the result accordingly.
10th May 2018, 8:50 AM
MsJ - avatar
+ 6
is box model same with grid view
8th May 2018, 6:20 PM
Amethyst Animion
Amethyst Animion - avatar
+ 2
You can implement the basic layout based on your grid system. the spacing has to be globally defined same for all elements. every columns and elements like, Form elements, P, Heading Tags, etc., should have similar spacing for all the details.
10th May 2018, 6:07 AM
Chirag Dave
Chirag Dave - avatar