HTML5, HTML and CSS Course- Level 2 By High School Technology Services myhsts.org Thinking Inside the Box By High School Technology Services myhsts.org Elements as Boxes ▪ All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. ▪ The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Elements as Boxes Elements as Boxes ▪ Content - The content of the box, where text and images appear ▪ Padding - Clears an area around the content. The padding is transparent ▪ Border - A border that goes around the padding and content ▪ Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. E.g. - div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } Elements as Boxes ▪ In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. ▪ Assume we want to style a <div> element to have a total width of 350px: ▪ The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin ▪ The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 320px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 350px Elements as Boxes ▪ What if these values are undeclared? ▪ If padding or borders are undeclared, they are either zero (likely if you are using a css reset) or the browser default value (probably not zero especially on form elements that are commonly not reset). ▪ If the width of a box is undeclared (and the box is a block level element), things get a little weirder. Elements as Boxes The lesson here being that the default width of a box isn't really 100% but a less tangible "whatever is left". Padding The padding property sets the padding space on all sides of an element. It is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left). ▪ Initial value - as each of the properties of the shorthand is zero. ▪ Instead we can do – ▪ padding: 5%; /* on all sides 5% padding */ ▪ padding: 10px 20px; /* top and bottom 10px padding */ /* left and right 20px padding */ ▪ padding: 10px 3% 20px; /* top 10px padding */ /* left and right 3% padding */ /* bottom 20px padding*/ ▪ padding: 1em 3px 30px 5px; /* top 1em padding */ /* right 3px padding */ /* bottom 30px padding */ /* left 5px padding */ Margins The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left. ▪ Initial value - as each of the properties of the shorthand is zero. ▪ Instead we can do – ▪ margin: 10px; /* all sides 10px margin */ ▪ margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */ ▪ margin: auto; /* box is horizontally centered, 0 margin on top and bottom */ Borders The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color E.g. – border: 1px; border: 2px dotted; border: dashed black; Looking Forward We will learn about Floating and Positioning of elements in the next session. We will cover - ▪ Normal Flow ▪ Floating ▪ Positioning Basics ▪ Relative Positioning ▪ Absolute Positioning ▪ Fixed Positioning Thank You. By High School Technology Services myhsts.org.