In flexbox, with align-items: flex-end, padding between blocks?

E

Edgar Balyan2021-07-03 19:16:51

css

Edgar Balyan, 2021-07-03 19:16:51

I wanted to make a calculator and set flexbox in css and unset indents of about 5px on top of the buttons that I did not set. This campaign happened when I wrote align-items: flex-end; how to remove these indents and set your own. Code below

<!DOCTYPE html>
<html lang="ru">
<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>Calculator</title>
   <link rel="stylesheet" href="./css/style.css">
</head>
<body>
   <div class="wrap">
      <div class="display"></div>
      <div class="operator">%</div>
      <div class="operator">CE</div>
      <div class="operator">C</div>
      <div class="operator">X</div>
      <div class="operator">1/x</div>
      <div class="operator">x<sub>2</sub></div>
      <div class="operator">&#x221a x</div>
      <div class="operator">/</div>
      <div class="operator">7</div>
      <div class="operator">8</div>
      <div class="operator">9</div>
      <div class="operator">X</div>
      <div class="operator">4</div>
      <div class="operator">5</div>
      <div class="operator">6</div>
      <div class="operator">-</div>
      <div class="operator">1</div>
      <div class="operator">2</div>
      <div class="operator">3</div>
      <div class="operator">+</div>
      <div class="operator">+/-</div>
      <div class="operator">0</div>
      <div class="operator">,</div>
      <div class="operator blue">=</div>
   </div>

</body>
</html>

.wrap {
   background-color: #1f1f1f;
   width: 320px;
   height: 532px;
   text-align: center;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   align-items: flex-end;
   padding: 4px;
}

.operator {
   background-color: #ccc;
   color: #fff;
   margin: 0 2px;
   width: 76px;
   height: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.blue {
   background-color: #134369;
}

.display {
   height: 205px;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladimir, 2021-07-03
@Grade3

What is this, a joke? not funny)
margin: 0 2px;