Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:

Similar presentations


Presentation on theme: "CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:"— Presentation transcript:

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


Download ppt "CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:"

Similar presentations


Ads by Google