Css-codes/the box model.css at master · Lordazekage/Css-codes · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

body{
    margin: 0;
}

div {
    width: 500px;
    height: 200px;
}

h1{
    background-color: pink;
    width: 500px;
    padding-left: 100px;
    padding-top: 50px;
    margin: 0;
}

span {
    margin-left: 30px;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid black;
    padding: 4px;
    background-color: gray;
}

#one {
    background-color: #e5989b;
    border-width: 5px;
    border-color: black;
    border-style: solid;
    box-sizing: border-box;
    margin-left: 30px;
}

#two {
    background-color: #b5838d;
border-color: #9fcdb2;
border-width: 3px;
border-style: dashed;
border-left-width: 8px;
padding-right: 50px;
margin: 150px;
}

#three {
    background-color: #6d6875;
border: 4px solid black;
/* if you need to further modify a side then add after the general*/
border-left-style: dotted;
border-radius: 40px 25%; /* can be set with px value or % or both*/
}


button{
    padding: 0px 5px 10px 15px;
    margin: 10px 400px;
    width:100px;
    border: inset;
}

button:hover {
   background-color: #bbb;
}

button:active{
    background-color: green;
}


/*is the idea that everything in css is basically a box.

width sets the width of the inner content area. and height the height of
the inner content area.

padding is the distance btw the content inside the box and the border.

margin is the space btw two borders.

border is the demarcation betw the inside of the box and the outside.
border has many css formats eg border-width, color, style, top, bottom, left, right etc.

more on border:

box-sizing allows you to modify the border in relation the the space inside.
from above the 1st div has a width of 500 and border of 5 on all sides, this totals 510.
but with border-box it made sure not to exceed that 500 and thus had the border take up the space
of inside the width.

you can have more than one style at once, writing two means the first one reps top and bottom while the
second one left and right or you can write 4, repping top, right, bottom and left.

each side of the border can be styled diffently and color too.

border shorthand- ie border: width, style, color.

border radius: this allows us to set the radius od the corners so as to make it more rounded.

the same pattern for shorthand for them all, border, padding, margin etc.

using google dev tools, when you select, blue is text content area, green is padding area
and orange is margin area.


something to take note of, recall inline and block properties from the beginnin?
well they are important here, for block elements, padding, margin and border are respected.
but for in-line elements, only left-right padding and margin are applied, the verticals are ignored.
height and width are als ignored for inline.

now there's another called inline-block, in this, it behaves like inline except in relation to elements
like width, height, margin and padding which are all respected.

this is brought about by using the CSS format property called DISPLAY,it can format the selected to act like
block, inline or even inline-block among others.