-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-css.html
108 lines (93 loc) · 2.6 KB
/
html-css.html
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
<!DOCTYPE html>
<html>
<head>
<title>SPRINT 2 BLOG</title>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:[email protected]&display=swap"
rel="stylesheet"
/>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
</html>
<body>
<div class="header">
<a href="#default" class="logo">Margin, Border and Padding</a>
<div class="header-right">
<a href="index.html" class="#Home">Home</a>
<a href="blog.html" class="#blog"
>Blog
<a href="te-houtaewa-template.html" class="#Te Houtaewa"
>Te Houtaewa</a
>
</div>
</div>
<body></body>
</body>
<body>
<br />
<br />
<h1>Margin, Border and Padding</h1>
<h4>16th January 2025</h4>
<br />
<p>
Margin, border and padding are known as key components in the CSS box model.
They determine how elements are spaced and laid out on your webpage. When
explaining the difference between margin border and padding, it can be
broken down quite easily. The best way to do that would be to start by
looking closer into each one:
</p>
<br />
<h2>Margin</h2>
<p>
Margin is the space outside the border. Its purpose is to create space
between the chosen element and the other elements on the webpage.
</p>
<img
src="https://miro.medium.com/v2/resize:fit:1400/1*x-vNdcd6WRpSISXA2kS0Sg.gif"
alt="Margin"
width="500px"
height="300px"
/>
<br />
<br />
<h2>Border</h2>
<p>
The border is the line that wraps around the padding and the content of the
element. It is used to separate an element from its surroundings. There are
many types of borders, with the most popular ones usually being the solid,
dotted or dashed.
</p>
<img
src="https://miro.medium.com/v2/resize:fit:1400/1*MCRiqjMD3RXyli8KFMIf-w.gif"
alt="Border"
width="500px"
height="300px"
/>
<br />
<br />
<h2>Padding</h2>
<p>
Padding is the open space that separates the content and the border. To stop
this from happening, the padding pushes the content inward.
</p>
<img
src="https://miro.medium.com/v2/resize:fit:750/0*ZpLT9XxolY11bHJl.jpg"
alt="padding"
width="500px"
height="300px"
/>
<br />
<br />
<p>
As you can see, these key components are must-haves in getting the desirable
design on your webpage.
</p>
<br />
<br />
<br />
<h5><span class="move-left">@ Callum Bromley 2025</span></h5>
<br />
</body>