csstdg5figs/07-padding-borders-outlines-and-margins/margins_punching-out.html at main · meyerweb/csstdg5figs · 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Punching out of a parent</title>
<link rel="stylesheet" type="text/css" href="c/pbom-baseline.css">
<style type="text/css">
body {padding-bottom: 5em;}
	div {background: hsl(42,80%,80%); border: 1px solid;}
	p {margin: 1em;}
	p.punch {background: white; margin: 1em -1px 1em 25%;
	  border: 1px solid; border-right: none; text-align: center;}
	p.mond {background: rgba(5,5,5,0.5); color: white; margin: 1em 3em -3em -3em;}
</style>
</head>
<body>

<div style="width: 400px; margin: 0 auto;">
<p>
Cavaliers est sit luptatum. Philip johnson don king,. Omar vizquel molly shannon typi decima odio, claritatem. Qui lake erie wisi hunting valley ea ut. Odio laoreet michael symon quinta. Brooklyn quarta.
</p>
<p class="punch">
Bob hope velit liber brad daugherty ohio city mentor headlands. Ullamcorper philip johnson dolore sollemnes polka hall of fame placerat. Adipiscing aliquip.
</p>
<p>
Quod te cleveland bowling saepius mayfield village. Garfield heights parma heights. Dolore quis,. Vero augue lakewood tempor. Erat lorem congue consuetudium. Dolor parum placerat option. Zzril quarta. Et facilisis iis superhost. Quam jim brown. Enim ullamcorper. Est qui liber emerald necklace. Nobis bedford doming, minim.
</p>
<p class="mond">
Investigationes dolor brooklyn lius liber sammy kaye. Aliquip vel cum dynamicus processus dolore screamin’ jay hawkins sequitur. Modo ii demonstraverunt delenit. Praesent ipsum the flats te. George voinovich amet collision bend insitam, steve harvey clay mathews. Ipsum praesent fiant usus nunc etiam.
</p>

</body>
</html>