Box model

Inner padding and outer margin 21 Pt2. Layout Box model border padding top Content margin top space outside space inside CSS shorthands for box sides border-top-width border-right-width border-bottom-width border-left-width padding-top padding-right padding-bottom padding-left margin-top margin-right margin-bottom margin-left top right bottom left side border width padding margin Table: properties for 4 sides of a box border-width: 1px 2px 3px 4px ; left right bottom top 1px 2px 3px 4px border-width: 1px; 1px 1px 1px 1px border-width: 1px 2px ; 1px 2px 1px 2px border-width: 1px 2px 3px ; 1px 2px 3px 2px Table: specify 4 sides with 1 shorthand property shorthands Should I add padding or margin? ● Add padding if you have a border or background . ● Add padding to make the clickable area larger. ● Add margin to create gaps between elements. ● The gap property is a better way to add gaps in flexbox or grid. NOTE : padding , margin , border-style , border-color can also use shorthands. NOTE : use non-shorthands to override shorthands. (Order matters.) margin left margin right margin bottom padding right padding left padding bottom box-sizing 22 Pt2. Layout Box model border Content border Content height height width width box-sizing: border-box ; box-sizing: content-box ; width: 100%; parent width: 100%; parent content-box is a bad idea. And it's the browser's default. We'll use border-box instead! *, ::before, ::after { box-sizing: border-box; } Fix the browser's default: outline border outline ● An outline is painted outside of the border . ● It does not change the size of things; it cannot affect the layout . ● The syntax is the same as border . ● Except that you DO NOT control each side and the corner radius . ● An outline is ideal for toggleable effects such as focus indicators . ● To toggle a border, set a transparent border when off and toggle it on by setting border-color to avoid layout change. border border width & height refers to what? like border, but w/o spacing Use this from now on! Add it to all projects! padding padding Box properties on inline content 23 Pt2. Layout Box model The Wold Wide Web is great. margin padding padding margin margin border padding add space add space add space no effect horizontal start & end start & end start & end no space each line each line no space no space NOTE : The height of line is only affected by line-height and font. Neither vertical margin, border, nor padding can affect the layout. NOTE : Vertical padding still adds space within the border and outline. NOTE : The space within the border does not include line-height . outline each line each line no space no space no border Logical properties inline-start inline-end block-end block-start inline-start inline-end block-start block-end inline axis (text flow) block axis (new lines) inline axis (text flow) block axis (new lines) Refer to box sides relative to the text direction (controlled by writing-mode & direction ). inline-size Examples effect horizontal space vertical effect vertical space width block-size height border- inline left-right border- block top-bottom border- block-end bottom W & H: margin-* padding-* border-* border-*-width Effect border-*-style border-*-color min-*-size max-*-size inline-size block-size Sides: