Download presentation
Presentation is loading. Please wait.
1
CSS Box Model margin border padding content 23
2
Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width: thick; border-width: 10px; border-styledotted, dashed, solid, double, groove, ridge, inset, outset, none border-style: solid; border-colorname, rgb value, or hex codeborder-color: red; Can set sides individually for all of the above using border-left-, border-right-, border-top-, and border-bottom-. Examples: border-top-width: 5px; border-left-style: dashed; bordercomposite rule: set width, style, color, in that order. border: 10px solid red; padding, margin number expressed in pixels (px), width of letter M in font (em), or % of parent block. Can set sides individually too! margin: 10px; padding: 5em; margin-right: 30%; padding-top: 10em; 24
3
Layout Properties PropertyValid valuesExample positionrelative (to normal flow position) absolute (out of normal flow) position: absolute; top, bottom, left, right number expressed in pixels (px), width of letter M in font (em), or % of parent block top: 5px; height, widthsame as aboveheight: 20em; z-indexan integer bigger number = more foreground z-index: 2; floatleft, rightfloat: left; displayblock, inline, nonedisplay: inline; 25
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.