1header, ul, nav, li, a /* other elements */{
2
3 display: block;
4 -webkit-box-sizing: border-box;
5 -moz-box-sizing: border-box;
6 box-sizing: border-box;
1
2/********************** CONTENT *************************
3The box that contains the actual element content like text,
4image, icon, gif, video,... */
5
6tag_name {
7 height: 90px;
8 width: 200px;
9}
10
11/********************** PADDING *************************
12Distance between the content and the border. The background color,
13of the element will never affect this space. But you can see this by
14contrasting with the background color of the parent element that
15contains your element*/
16
17tag_name {
18 padding-top: 50px;
19 padding-right: 30px;
20 padding-bottom: 50px;
21 padding-left: 80px;
22}
23
24/*OR: */
25
26tag_name {
27 padding: 25px 50px 75px 100px; /* top; right; bottom; left */
28}
29
30tag_name {
31 padding: 25px 50px 75px; /* top; right_&_left; bottom */
32}
33
34tag_name {
35 padding: 25px 50px; /* top_&_bottom; right_&_left */
36}
37
38tag_name {
39 padding: 25px; /* top_&_bottom_&_right_&_left */
40}
41
42
43/********************** BORDER *************************
44You can define a frame for your element's box. You can
45only see the border, after you define a style for that
46property */
47
48tag_name {
49 border-width: 5px 70px 10px 28px; /* or border-bottom-width: 10px; ... */
50 border-color: blue; /* or border-top-color: #b52e2e; ... */
51 border-style: dotted; /* or dashed, or solid, or ... */
52 border-radius: 70% /* making the corners more rounded */
53}
54
55/*OR: */
56
57tag_name {
58 border: 5px solid red; /* all_widths; style; color */
59}
60
61tag_name {
62 border-left: 6px dotted green; /* width; style; color */
63 border-top: 34px groove yellow; /* width; style; color */
64}
65
66
67/********************** OUTLINE *************************
68It's a line that's drawn around your html element, but
69contrary to the border, the dimensions of the outline
70aren't taken into account. It's drawn around elements,
71outside the borders, to make the element "stand out" */
72
73tag_name {
74 outline-width: thin; /* or medium; thick; outline-width: 4px; ... */
75 outline-color: blue; /* or #b52e2e; invert; ... */
76 outline-style: dotted; /* or dashed, or solid, or ... */
77 outline-offset: /* making the corners more rounded */
78}
79
80/*OR: */
81
82tag_name {
83 outline: dashed;
84}
85
86tag_name {
87 outline: dotted red;
88}
89
90tag_name {
91 outline: 5px solid yellow; /* all_widths; style; color */
92}
93
94tag_name {
95 outline: thick ridge pink;
96}
97
98
99
100/********************** MARGIN *************************
101This is the distance that separates an html element,
102from the other elements around it. The background color,
103of the element will never afect this space, because the
104margin doesn't have background color. The margin is an
105invisible border or space between two objects */
106
107tag_name {
108 margin-top: 100px;
109 margin-bottom: 100px;
110 margin-right: 150px;
111 margin-left: 80px;
112}
113
114/*OR: */
115
116tag_name {
117 margin: 25px 50px 75px 100px; /* top; right; bottom; left */
118}
119
120tag_name {
121 margin: 25px 50px 75px; /* top; right_&_left; bottom */
122}
123
124tag_name {
125 margin: 25px 50px; /* top_&_bottom; right_&_left */
126}
127
128tag_name {
129 margin: 25px; /* top_&_bottom_&_right_&_left */
130}
131
1MDN (Mozilla Developer Network)
2Probably the best place for an in-depth explanation of
3web related technologies.
4
5See the link below regarding the CSS BOX MODEL
1
2div {
3 width: 300px;
4 border: 15px solid
5green;
6
7padding: 50px;
8
9margin: 20px;
10}