1 07-the box-model

Editor's Notes

• #4: We've shown you many types of elements, and the subsequent common css properties that change their appearance. Now it's time to learn how they play together - and not just elements of the same type.The document is a crowded place, but through our control and placement, our careful styling, and hopefully a bit of CORRECT rendering display by the browser used - we get a well designed display.How can we control the placement of all these stacked up elements? To do this, we alter some of the properties of css that control how elements interact.
• #5: With our last lecture, we've been able to show that tables were logically ordered blocks of code that get organised and drawn little boxes (cells) in an ordered grid. The rules of what make a table organised and displayed in the way it is, is set out by the standards and the browsers that have been designed to use them. We can't override everything in the way something is drawn (because for example, tables are meant to be tables after all) but the more generic an element is, the more pliable it becomes. 
• #6: The best way to describe the layout model is with it's common name - the box model. It helps us to visualize what's going on when the document is shown in the browser.Lets illustrate this with an example...
• #7:  Lets think of it as a <p> element given the exploded view so we can see it's box model in detail. Lets paraphrase Shrek for a moment:"Elements are like onions, they have layers.“Lets imagine this 'block' element's top and work our way inward, in layers:
• #8: Margin [invisible] (pushes other elements away; personal space for elements)
• #9: Outline [decorating line] (shares the same space as the margin if you set both)
• #10: Border [decorating line] (having it increases the apparent size of the element) 
• #11: Padding [invisible space] (also increases apparent size; fills more internal space up!)
• #12: And the the content!This includes: ----- Height (and Width) ------
• #13: This outside to inside layering happens for top, right, bottom, and left of a block element. Lets look at each in more detail. 
• #14: The invisible margin area is like personal space for elements. It keeps other elements pushed a certain amount away from it, or keeps itself away from the edges of immovable boundaries like the browser window size or the element's fixed width and height parent elements. If another element is jostling with this margined element, but it also has a margin... that margin will overlap. Whoever has the largest margin value of those interacting elements, will determine how far they are from each other.
• #16: The outline of an element is quite self explanatory in purpose. You're adding an outline of a certain width, colour and density to the bounding dimensions of the element so it kind of looks like a box. Again, the amount of outline is drawn out and away from the width and height boundary.
• #17: The outline-style property can be quite decorative actually; with dotted, dashed, solid, double lined, 3d looking grooves, 3d looking ridges, the 3d look of being inset into the page, and the 3d look of outset from the page - all available.Outline is still tricky though, as it shares the space that the Margin uses. If you have a 4px Outline, and a 4px Margin, the final result is a margin overlapping the outline, but that's not going to change the appearance as margin's are invisible space, and outlines are definitely visible. If you have two elements next to each other, the outline of either one will not hesitate to bleed into the space of the other element. The outline is like air in the fact that other elements pass right through it and overlap it regardless if it's there or not. 
• #18: This might seem like it's the easiest to tackle because ultimately; this block element is being treated as, a simple rectangle!!By expanding and contracting in two dimensions, we can have the element occupy a space of the document's final rendered view. But, that said... if we add other things like border and padding to the inside of it, we're actually ADDING to the element's final visual dimensions because we're 'filling' it with more space - hence expanding it's boundaries. It's like a balloon in that way.The properties for width and height are:
• #20: A lot like the outline, a border is going to let us show a line with the bounds of the element. This time though, the border takes up space inside the bounding dimensions of the width and height. The width of the border actually adds to the size to the final width and height of the element when everything is presented. This happens on the same principle as a balloon - we stretch the balloon to it's width and height, but if we add more contents to it's inside, it's only option is to grow to accommodate that as well. When you're trying to make a box on the screen that contains something, and you want a border, you'll need to deduct those amounts from the final size you're aiming for. It uses it's own space and doesn't share! Eg, i want it to appear as 300px wide... so with a border of 5px set, my value for width should only be 295px. Borders also push content inward, not allowing it to overlap the border.Border-style's have exactly the same decorative properties of outlines; with dotted, dashed, solid, double lined, 3d looking grooves, 3d looking ridges, the 3d look of being inset into the page, and the 3d look of outset from the page.
• #23: adding is that little bit of extra cushion we put on an element to separate it's content from the border or outline. It's extra space, on the inside of the element's bounding dimensions, and just like border, adds to the size of the final element if you didn't think about it before specifying your height and width. If we add more padding to the element's inside, it's only option is to grow to accommodate that as well.
• #25: Lets recap our layers now with this new found knowledge:
• #26: Margin [invisible] (pushes other elements away; personal space for elements)
• #27: Outline [decorating line] (shares the same space as the margin if you set both)
• #28: Border [decorating line] (having it increases the apparent size of the element) 
• #29: Padding [invisible space] (also increases apparent size; fills more internal space up!)
• #30: And the the content!This includes: ----- Height (and Width) ------
• #31: Once you get to the core of content through all the box model layers, there are a few other properties which come into play in addition to our other known properties for text content etc. 
• #32: This is very basically; a certain amount of height, vertically centered over the middle of the text. A large line-height on small text, might have the effect of creating a gap below and above the text evenly between lines. How is this different from padding the text element? Well line-height is not applied to the box of the element, it's on the content - and because of that it affects all lines inside this element of text instead of the sides of the block of text.
• #33: For example, setting a line height on a paragraph (<p>...</p>) element will increase the space between each line of text as it flows from left to right. It's essentially the word-processor equivalent to line spacing. These height changes can space or position the text vertically in different places relative to the size of the text, and the design of the font.
• #34: This one is simple - it's horizontal alignment of text content inside it's element. left, centered, or right. There's also justification (and it works okay in decent browsers).