This is the CSS box model. It serves as a visual demonstration of how things are organized/aligned when setting style on a page with a css style sheet. The border is like the container your text or whatever else you are using will be inside of. The margin is the space between the edge of the page and the box and the padding is the space between the text and the edge of the box.
Padding is the space between the border and the text. This box has the same padding of 50px on each side. lorem ipsum lorem lorem ipsum ipsum lorem ipsum lorem ipsum wingardium leviosa lumos flippendo portego avara
Here is when the padding on top and bottom are the same and the padding on left and right are the same. The top/bottom are 50px and the left/right are 75px ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum lorem ipsum lorem ipsum lorem.
Here is how it looks to have the padding different on every side. In here the padding is (starting with the top and going clock-wise) 25px 50px 75px 100px lorem ipsum lorem ipsum wik also wik also also wik lorem ipsum wingardium leviosa lumos flippendo portego avara
This is an example of the default margin. The margin is the space between the border and the edge of the page lorem ipsum ipsum lorem lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
This is the margin set to 50px lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
This is the margin set to 150px lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
You can also have things change or do something when the cursor hovers over it and on top of that you can set how long it takes for that change to finish taking place. this box is just the control though and will not do anything.
When you hover the cursor over this box the background color will change to green over the course of 4 seconds.
When you hover over this box the box's dimensions will change over the course of 2 seconds.
Color combination | Background | Text | Contrast ratio | WCAG Rating |
---|---|---|---|---|
lorem ipsum lorem lorem ipsum lorem ipsum lorem | #F8F800 | #93006E | 7.46:1 | AAA |
lorem ipsum lorem lorem ipsum lorem ipsum lorem | #F04E46 | #B3EFFF | 5.51:1 | AA |
lorem ipsum lorem lorem ipsum lorem ipsum lorem | #00CFFF | #990000 | 4.82:1 | AA |
lorem ipsum lorem lorem ipsum lorem ipsum lorem | #F93684 | #A2FB36 | 2.78:1 | none |
lorem ipsum lorem lorem ipsum lorem ipsum lorem | #046B99 | #21F400 | 3.92:1 | none |
The relative position property places something relative to where it would normally appeared. in this case it shifted a little to the left. This was shifted 40 px to the right and 20px down
The absolute position property places something on a specific spot on bassed off of the center of the page and then moved by x and y amounts. it is not affected by where in the html file the object is written, it will appear in the same place. this was shifted down by 1300px and right by 10px
The fixed position property positins something in a fixed place on the screen, so you will always see it in the exact same spot regardless of where you scroll. The position for this was right 50px bottom 200px
The h-offset casts a shadow either to the left or the right of the box by X number of pixels. Use a positive value to go right and a negative to go left. on here the box-shadows' horizontal properties are set to 150px (going right) and -10px (going left)
The v-offset works much like the horizontal property except vertically. positive vales cast the box-shadow downwards and negative values cast it upwards. On this box we are using the vertical values of 10px (going down) and -120px (going up)
The blur property smooths out the shadow so it fades into the background. The value set for the blur determins how gradually it fades. The two previous examples had no blur applied, this is what it looks like with a blur of 20px applied to the right box shadow and 100px applied to the left box shadow.