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

Question

Can you give an example?

Answer 1

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.

Answer 2

is box model same with grid view

Answer 3

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.