html-css-live-lessons/82.html at master · htmljenn/html-css-live-lessons · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS Box Model</title>
    <style>
      h2 { margin-bottom: 0;}
      div {
        width: 80%;
        background-color: rgba(239, 135, 51, 0.5);
  	  }
  	  .one { margin-bottom: 1em;
    	  height: auto;
    	  width: 500px;
    	  padding-top: 1em;
    	  padding-bottom: 0.5em;
    	  padding-right: 0.25em;
    	  padding-left: 1.5em;
  	  }
      .two { margin-left: 120px;
        margin: 1.0em;
        padding: 2.0em;
        margin: 25px 15px;
        padding: 20px 25px 30px 40px;
         }

    </style>
 </head>
  <body>
    <h1>CSS Box Model</h1>
    <h2>By Jennifer Kyrnin</h2>
    <div class="one">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis iaculis quam eget commodo. Integer faucibus, mauris vitae iaculis malesuada, augue augue interdum nisl, sed ornare nisl massa blandit urna. Sed semper venenatis egestas. Aenean id arcu arcu. Curabitur gravida massa in nibh tristique vehicula. In pellentesque finibus molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer gravida ultricies eros, id molestie eros vestibulum vel. Morbi lectus odio, luctus ac tortor eu, ultricies dapibus velit.
    </div>
    <div class="two">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis iaculis quam eget commodo. Integer faucibus, mauris vitae iaculis malesuada, augue augue interdum nisl, sed ornare nisl massa blandit urna. Sed semper venenatis egestas. Aenean id arcu arcu. Curabitur gravida massa in nibh tristique vehicula. In pellentesque finibus molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer gravida ultricies eros, id molestie eros vestibulum vel. Morbi lectus odio, luctus ac tortor eu, ultricies dapibus velit.
    </div>
  </body>
</html>