foundations/index.html at master · alanportugal/foundations · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>The Origins of Halloween</title>
  <link rel="stylesheet" type="text/css" href="styles/style.css">

</head>
<body id="main">
  <header>
    <img src="https://images.pexels.com/photos/374906/pexels-photo-374906.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" alt="The cutest puppy EVER!!" >
    <h1>Box Model Info Sheet</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="contact.html">Contact</a></li>

        <li><a href="https://www.google.com/" target="_blank">Google</a></li>
      </ul>
    </nav>
  </header>

  <h1>Text test</h1>

  <article>
    <h2 class="highlight">How The Box Model Works</h2>

     <figure>
      <img  src="http://t.cbsimg.net/i/tr/gallery/Melonfire/css_image100001.gif">
      <figcaption>The CSS Box Model</figcaption>
    </figure>

    <p>All HTML elements can be considered as boxes. The box model wraps around the element and consists of the margin, border, padding, and content itself.</p>


    <p>The box model allows us to add a border around elements, and control the space between them. </p>


    <p>Example of styling with the box model:</p>
    <pre>
      .box {
        width: 30%;
        padding: 1em;
        border: 5px solid gray;
        margin: 0;
      }


    </pre>

    <p> The different parts of the box model in more detail:     </p>
      <ol>
        <li><em>Content</em> - The content of the box, where text and images appear.</li>
        <li><em>Padding</em> - Clears an area around the content. The padding is transparent.</li>
        <li><em>Border</em> - A border that goes around the padding and content.</li>
        <li><em>Margin</em> - Clears an area outside the border. The margin is transparent.</li>
      </ol>

  </article>


  <aside class="highlight">
    <h3>CSS Tip</h3>
    <p>When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.</p>
  </aside>

  <footer>
    <p>Source: <a href="http://www.w3schools.com/css/css_boxmodel.asp">W3Schools</a>.</p>
  </footer>
</body>
</html>