Today I learned about the Box Model and Positioning elements

#html #css #webdev

Here's my HTML code.

<!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>Positioning</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <div class="box box-four"></div>
    <div class="boxes">
      <div class="box box-one"></div>
      <div class="box box-two"></div>
      <div class="box box-three"></div>
    </div>
  </body>
</html>

Here's my CSS code.

.boxes {
  border: 3px solid lightcoral;
}
.box {
  width: 5rem;
  height: 5rem;
}
.box-one {
  background-color: lightgreen;
}
.box-two {
  background-color: black;
}
.box-three {
  background-color: blue;
}
.box-four {
  background-color: orange;
  position: relative;
  left: 20rem;
  top: 10rem;
}