Хотел сделать калькулятор и в css задал flexbox и сверху кнопок незаданные отступы примерно в 5px которые я не задавал. Это походу произошло когда я прописал align-items: flex-end; как урать эти отступы и задать свои. Код снизу
<!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">√ 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;
}
Простой
Простой
