Обьекты создаются с размером 0x0 даже при указанном размере

Question

* {
    padding: 0;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
    background-color: lightcoral;
}
#piano {
    background-color: aquamarine;
    width: 50%;
    height: 100vh;
  margin: 0 auto;
}
#line {
    background-color: black;
    width: 3vw;
    height: 100vh;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
        <title>Piano</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="piano">
            <div id="line"></div>
            <div id="line"></div>
            <div id="line"></div>
            <div id="line"></div>
        </div>
    </body>
</html>

По какой-то причине код не создает, черные вертикальные полоски, а так-же хотел что-бы они стояли на равномерном удалении друг от друга. Не подскажите как это можно сделать?

Answer 1

Можно задать классу .piano display:flex и выровнять при помощи align-content и justify-content

* {
    padding: 0;
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
body {
    background-color: lightcoral;
}
#piano {
    background-color: aquamarine;
    width: 50%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-content: space-evenly;
    justify-content: space-evenly;
}
#line {
    background-color: black;
    width: 3vw;
    height: 100vh;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
        <title>Piano</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="piano">
            <div id="line"></div>
            <div id="line"></div>
            <div id="line"></div>
            <div id="line"></div>
            
        </div>
    </body>
</html>

БЛОГ НА HUSL

Обьекты создаются с размером 0x0 даже при указанном размере

Ответы (1 шт):