-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbox-sizing.html
71 lines (60 loc) · 3.05 KB
/
box-sizing.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box sizing tests</title>
<style>
body {
margin: 0;
}
.box {
width: 50%;
height: 200px;
display: inline-block;
margin-inline: -2px;
padding: 24px;
box-sizing: border-box;
overflow: auto;
vertical-align: middle;
}
.aqua {
background-color: aqua;
}
.coral {
background-color: coral;
}
span {
background-color: black;
color: white;
width: 50%;
display: inline-block;
margin-inline: -2px;
}
</style>
</head>
<body>
<div class="box aqua">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores est similique maxime,
perspiciatis provident culpa, deserunt aliquid soluta quasi libero quaerat excepturi esse aperiam corrupti autem
architecto, sequi nemo accusamus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos porro velit
laudantium illo expedita aspernatur tempore quam fuga, soluta, laboriosam consectetur excepturi suscipit
voluptas? Praesentium sed nulla consectetur hic ipsam? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo amet corporis officiis tenetur dignissimos, aut nesciunt nulla maiores culpa quis accusamus excepturi ab
iste veniam eaque obcaecati hic nemo natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nihil
eligendi veniam, fuga fugiat doloremque dolore, rem quaerat et minus omnis ipsam, beatae doloribus praesentium.
Error commodi perspiciatis et officia.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos porro velit
laudantium illo expedita aspernatur tempore quam fuga, soluta, laboriosam consectetur excepturi suscipit
voluptas? Praesentium sed nulla consectetur hic ipsam? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo amet corporis officiis tenetur dignissimos, aut nesciunt nulla maiores culpa quis accusamus excepturi ab
iste veniam eaque obcaecati hic nemo natus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nihil
eligendi veniam, fuga fugiat doloremque dolore, rem quaerat et minus omnis ipsam, beatae doloribus praesentium.
Error commodi perspiciatis et officia.</div>
<div class="box coral">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores est similique maxime,
perspiciatis provident culpa, deserunt aliquid soluta quasi libero quaerat excepturi esse aperiam corrupti autem
architecto, sequi nemo accusamus. </div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptatem!</span>
<span>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, voluptatem!</span>
</body>
</html>