html5-training/margin-padding.html at master · jeromba6/html5-training · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Margin en padding</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        header {
            height: 80px;
            background-color: greenyellow;
        }
        header img {
            margin-left: 10px;
            margin-top: 10px;
        }
        .container{
            width: 760px;
            margin: 0 auto;
        }
        .blok1{
            /*border: 1px solid red;*/
            width: 30%;
            float: left;
            background-color: #aff5ff;
            padding: 4px;
            margin: 4px;
            /*zorg er voor dat de box niet breder wordt dan 33% */
            box-sizing: border-box;
        }
        .blok1 img{
            width: 100%;
        }

        .blok2{
            /*border: 1px solid red;*/
            width: 30%;
            float: left;
            padding: 4px;
            /*zorg er voor dat de box niet breder wordt dan 33% */
            box-sizing: border-box;
        }
        .blok3{
            /*border: 1px solid red;*/
            width: 30%;
            float: left;
            padding: 4px;
            /*zorg er voor dat de box niet breder wordt dan 33% */
            box-sizing: border-box;
        }

    </style>
</head>
<body>
<header>
    <img src="img/KPN-Logo.png" height="60"/>
</header>
<div class="container">
    <div class="blok1">
        <h2>Koptekst voor alinea 1</h2>
        <img src="img/puppy.jpg" />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
      </div>
    <div class="blok2">
        <h2>Koptekst voor alinea 2</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
    </div>
    <div class="blok3">
        <h3>Koptekst voor alinea 3</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic iure libero perspiciatis quisquam repellendus? Ad
        aliquid architecto blanditiis, commodi dicta explicabo illo iusto natus nesciunt odio quae, quam quas sunt!
    </div>
</div>
</body>
</html>