CSS Box Model

Every element is in box With very few exceptions, every element in HTML has a box that it is held in Can make it visible with background and border

Box Model Margin – clears an area around the border. Does not have a background color – it is transparent Border – a border that goes around the padding and content. Affected by the background color of the box. Padding – clears an area around the content. Affected by background color of the box Content – the content of the box, where text appears. Don’t forget to give the border some sort of style! <div> this is a div with some text <br/> In fact, this text has two lines <div> div { width:220px; padding:10px; border:5px solid gray; margin:0px; }

Content Padding Border Margin

No padding or border Rounded borders No padding borders or margins

Box Model Allows us to place borders, and space elements in relation to other elements Remember that border must have size, color and style Here’s where Inspect Element starts being important!

Box Model & Inspect Element Using Chrome tools helps you see the different parts

Centering centering the TEXT (within the box) text-align: center; centering the BOX Need to tell it to treat as a block display: block; Must have a width (px or %) display: table; computes it for you center using margin margin-left: auto; margin-right: auto;

Centering list items One of the areas with browser differences In some cases (Firefox), centering text centers the bullet In other cases (Chrome), centering text does not center the bullet Solution: list-style-position: inside; bullets INSIDE the list item’s formatting

A cool new feature Rounded corners on boxes border-radius: 15px; New with the latest version of CSS If not supported by a browser, you get square corners!