CSS: The Box Model
Content:
- this is whatever is inside the tag
- your text, table, list item, cell, etc.
Width:
- this is the width of the content
- inside padding and border
Padding:
- the space between the content and the border
Border:
- you can set color, style, and thickness
Margin:
- this setting “pushes” your content away from other block elements
- Margin is considered invisible
Box Model Properties and Values
- width
self explanatory
- padding
padding right, padding, left, p
- borders
border width, border style, border style
- margin
code samples:
- Max-width: 200 pixels;
- Float: right;
- border: 1 pixels solid #336699;
- padding: .5 em;
- margin: 0 0 .5 em .5 em ;
- background-color: rgb (200, 200, 200);
- border-radius: 10 pixels;
box-shadow: 10 pixels 10 px
border radius – creates rounded corners(with multiple values from top-left corner clockwise
padding – with just 1 values sets it on all four sides of the content
margin – goes outside of the borders and is invisible
1vw – 1% of the screen width
1vh – 1% of the screen height
-negative box shadow does not exist.