DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I learned about the Box Model and Positioning elements

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Here's the output
Alt Text

Top comments (2)

Collapse
 
zubairmohsin33 profile image
Zubair Mohsin

Keep it up boy!

Collapse
 
ahtshamajus profile image
Ahtsham Ajus

Thank You So Much bro !