Question 303121 in Html Question posted in
Some basic documentation can be found here.

Html – How can i get this container down

I’m making a basic calculator the problem i have is When i use margin-top to separate the screen container from the top of the main container a bit it just ignores it and doesn’t descend, it just descends with all of the main container, it doesn’t work the way i want it and i have no clue why.

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.main-container {
  width: 400px;
  height: 570px;
  margin-left: 1em;
  margin-top: 1em;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  background-color: rgb(198, 235, 191);
}

.teclas-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
  width: 350px;
  height: 350px;
  margin-left: 25px;
  margin-top: 50px;
  border-radius: 5px;
}

.box {
  margin-left: 15px;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 45px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  font-weight: bold;
}

.box:last-child {
  width: 325px;
  height: 40px;
  background-color: aqua;
}

.box:nth-child(13) {
  background-color: red;
}
<header>
  <h1>Basic Calculator</h1>
</header>
<main>
  <div class="main-container">
    <div class="screen">
    </div>
    <div class="teclas-wrapper">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">+</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">-</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">*</div>
      <div class="box">C</div>
      <div class="box">0</div>
      <div class="box">,</div>
      <div class="box">/</div>
      <div class="box">=</div>
    </div>
  </div>
</main>

I tried to use the margin property individually and just works the margin-left.

Tags:

2

Answers


  1. 0

    Simply add a padding-top to the main-container. and it will work. What you encounter if you add a margin-top to the screen is a margin collapse.

    html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.main-container {
  width: 400px;
  height: 570px;
  margin-left: 1em;
  margin-top: 1em;
  padding-top: 10px;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  background-color: rgb(198, 235, 191);
}

.teclas-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
  width: 350px;
  height: 350px;
  margin-left: 25px;
  margin-top: 50px;
  border-radius: 5px;
}

.box {
  margin-left: 15px;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 45px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  font-weight: bold;
}

.box:last-child {
  width: 325px;
  height: 40px;
  background-color: aqua;
}

.box:nth-child(13) {
  background-color: red;
}
    <header>
  <h1>Basic Calculator</h1>
</header>
<main>
  <div class="main-container">
    <div class="screen">
    </div>
    <div class="teclas-wrapper">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">+</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">-</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">*</div>
      <div class="box">C</div>
      <div class="box">0</div>
      <div class="box">,</div>
      <div class="box">/</div>
      <div class="box">=</div>
    </div>
  </div>
</main>
    Login or Signup to reply.
  2. 0

    You need to assign position: absolute: to your main-container class.

    html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.main-container {
  width: 400px;
  height: 570px;
  position: absolute;
  margin-left: 1em;
  margin-top: 1em;
  background-color: rgb(68, 64, 64);
  border-radius: 15px;
}

.screen {
  border-radius: 20px;
  width: 380px;
  height: 150px;
  margin-left: 10px;
  margin-top: 10px;
  background-color: rgb(198, 235, 191);
}

.teclas-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  background-color: black;
  width: 350px;
  height: 350px;
  margin-left: 25px;
  margin-top: 50px;
  border-radius: 5px;
}

.box {
  margin-left: 15px;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 45px;
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  font-weight: bold;
}

.box:last-child {
  width: 325px;
  height: 40px;
  background-color: aqua;
}

.box:nth-child(13) {
  background-color: red;
}
    <header>
  <h1>Basic Calculator</h1>
</header>
<main>
  <div class="main-container">
    <div class="screen">
    </div>
    <div class="teclas-wrapper">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">+</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">-</div>
      <div class="box">7</div>
      <div class="box">8</div>
      <div class="box">9</div>
      <div class="box">*</div>
      <div class="box">C</div>
      <div class="box">0</div>
      <div class="box">,</div>
      <div class="box">/</div>
      <div class="box">=</div>
    </div>
  </div>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search