The Box Model

What’s a Box? Any HTML Element Box can be “drawn” around it <p>This is my text</p> This is my text

Overview

Content Area Space taken up by content itself Content can have a specific width set to it Can be in either px or % (% of parent element) Example: h1{ width: 300px; }

Content Area -> More Content can have height set on it If you have more than fits in that height, must decide what to do with overflow – or it will bust past your borders

Content Area -> More overflow: hidden; Simply won’t show parts that won’t fit overflow: scroll; Picks up scroll bars on both directions overflow:auto Picks up scroll bars only if it needs them and only in direction it needs them

Content Area -> More Additional width & height controls max-height Allows to be smaller, but can’t expand past this min-height Allows to be larger, but can’t shrink past this max-width min-width

Padding Defines space between content area and border Will take on background color of content if it has color Can apply all around Or just to certain side

Padding -> More Control sides individually: Combined versions: padding-top: amt; padding-right: amt; padding-bottom: amt; padding-left: amt; Combined versions: padding: amt; Applies same amount to all 4 sides

Padding -> More Shorthand Versions padding: amt1 amt2; 1st number = top & bottom 2nd number = left & right padding: amt1 amt2 amt3; 1st number = top 3rd number = bottom padding: amt1 amt2 amt3 amt4; 2nd number = right 4th number = left Same order as a CLOCK

Border Outlines visible portion of element Can apply style, thickness, and color to it Can apply all around Or just to certain side

Border -> More Available Values for Borders border-color: color value; border-width: thin | medium | thick | amt in px border-style: dotted | dashed | solid | double | groove | ridge | inset | outset Can control independently ex: border-top-color:#f00;

Border -> More Shorthand Version Combined Versions border-top: color width style; Combined Versions Ex: border: 2px #f00 dotted; Applies to all borders

Margin Completely invisible No background color Will not obstruct elements behind it Can apply all around Or just to certain side

Margin -> More Units = px or % (% of container) Control independently (just like padding) margin-left, etc. Control in same combinations as padding with 1, 2, 3, or 4 values representing different sides Special value: auto Makes elements whose widths do not take up the entire page move to the middle!

Only applies to Content Area! Setting Dimensions Only applies to Content Area! Element{ width: 200px; border: 10px solid #99c; padding: 20px; margin: 20px; } Whole Rigmarole Consumes 300 px! 20px margin 20px margin 240px 200 content + 20 padding + 20 padding 10px border 10px border

Total Width Content area width + Left padding + Right padding + Left margin + Right margin+ Left border + Right border If aiming for a specific width, need to take into account all values

Quirk with Margins If stacked – top & bottom margins collapse together Will use value for larger margin when this happens.