LuisFPayero/index.html

## index.html
<!DOCTYPE html>


<html lang="en-us">

  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="./styles.css" type="text/css">
    <title>The Box Model</title>
  </head>

<body>

  <table>

    <thead>
      <h1>
          <tr>
            <th colspan="1">Tag</th>
            <th colspan="1">Name</th>
            <th colpan="1">Description</th>
          </tr>
      </h1>
    </thead>

      <h2>
        <tbody>
         <tr>
          <td class="tag">Margin Collapse</td>
          <td class="italic">margin collapse</td>
          <td>Occurs when top and bottom margins of blocks combine into a single margin equal to the largest individual block margin.</td>
          </tr>

          <tr>
            <td class="tag">CSS Autokeyword</td>
            <td class="italic">margin: auto</td>
            <td>The value auto can be used with the property margin to horizontally center an element within its container.</td>
          </tr>

          <tr>
            <td class="tag">Overflow</td>
            <td class="italic">visible, hidden, scroll</td>
            <td>Will determine how the browser handles content too large for its container.</td>
           </tr>

       <tr>
          <td class="tag">Minimum Width</td>
          <td class="italic">min-width</td>
          <td>Used to set a minimum width for a content's box.</td>
      </tr>

       <tr>
          <td class="tag">Minimum Height</td>
          <td class="italic">min-height</td>
          <td>Used to set a minimum height for a content's box.</td>
      </tr>

      <tr>
          <td class="tag">Visibility</td>
          <td class="italic">visibility: hidden</td>
          <td>Used to render hidden objects invisible to the user, without removing them from the page.</td>
      </tr>

       <tr>
          <td class="tag">Box Sizing: Content Box</td>
          <td class="italic">content-box</td>
          <td>Renders the actual size of the element including the content box; but not the paddings and borders.</td>
       </tr>

       <tr>
          <td class="tag">Box Sizing: Border Box</td>
          <td class="italic">border-box</td>
          <td>Renders the actual size of an element including the content box, paddings, and borders.</td>
       </tr>

    </tbody>

    </h2>

</table>

</body>

</html>

## styles.css
body {
  font-family: Arial, sans-serif;
  background-color: gainsboro;
}

h1 {
  text-align: center;
}

h2 {
  color: rebeccapurple;
  text-align: center;
}

table {
  border: 2px solid salmon;
  width: 650px;
  margin: 0 auto;
  background-color: white;
}

thead {
  background-color: MediumTurquoise;
  border: 1px dotted darkorchid;
}

td {
  border: 1px solid darkorchid;
}

.italic {
  font-style: italic;
}

.tag {
  color: Salmon;
}
	<!DOCTYPE html>


	<html lang="en-us">

	<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href="./styles.css" type="text/css">
	<title>The Box Model</title>
	</head>

	<body>

	<table>

	<thead>
	<h1>
	<tr>
	<th colspan="1">Tag</th>
	<th colspan="1">Name</th>
	<th colpan="1">Description</th>
	</tr>
	</h1>
	</thead>

	<h2>
	<tbody>
	<tr>
	<td class="tag">Margin Collapse</td>
	<td class="italic">margin collapse</td>
	<td>Occurs when top and bottom margins of blocks combine into a single margin equal to the largest individual block margin.</td>
	</tr>

	<tr>
	<td class="tag">CSS Autokeyword</td>
	<td class="italic">margin: auto</td>
	<td>The value auto can be used with the property margin to horizontally center an element within its container.</td>
	</tr>

	<tr>
	<td class="tag">Overflow</td>
	<td class="italic">visible, hidden, scroll</td>
	<td>Will determine how the browser handles content too large for its container.</td>
	</tr>

	<tr>
	<td class="tag">Minimum Width</td>
	<td class="italic">min-width</td>
	<td>Used to set a minimum width for a content's box.</td>
	</tr>

	<tr>
	<td class="tag">Minimum Height</td>
	<td class="italic">min-height</td>
	<td>Used to set a minimum height for a content's box.</td>
	</tr>

	<tr>
	<td class="tag">Visibility</td>
	<td class="italic">visibility: hidden</td>
	<td>Used to render hidden objects invisible to the user, without removing them from the page.</td>
	</tr>

	<tr>
	<td class="tag">Box Sizing: Content Box</td>
	<td class="italic">content-box</td>
	<td>Renders the actual size of the element including the content box; but not the paddings and borders.</td>
	</tr>

	<tr>
	<td class="tag">Box Sizing: Border Box</td>
	<td class="italic">border-box</td>
	<td>Renders the actual size of an element including the content box, paddings, and borders.</td>
	</tr>

	</tbody>

	</h2>

	</table>

	</body>

	</html>
	body {
	font-family: Arial, sans-serif;
	background-color: gainsboro;
	}

	h1 {
	text-align: center;
	}

	h2 {
	color: rebeccapurple;
	text-align: center;
	}

	table {
	border: 2px solid salmon;
	width: 650px;
	margin: 0 auto;
	background-color: white;
	}

	thead {
	background-color: MediumTurquoise;
	border: 1px dotted darkorchid;
	}

	td {
	border: 1px solid darkorchid;
	}

	.italic {
	font-style: italic;
	}

	.tag {
	color: Salmon;
	}