'why when i give my input field a width of 100 % and margin of 10 for example it doesnt apply the margin? [duplicate]

so I'm trying to make the input field like this image to see what I want to expect

and for some reason box-sizing:border-box doesn't work

I'm using chrome browser

am I doing something wrong? .....................

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}



#input-el {
    box-sizing: border-box !important;
    width: 100%;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    border-style: solid ;
    border-width: 2;
    border-color: #5f9341;
    background-color: rgb(214, 229, 248);
    color: black;
    
}

#input-btn {
    margin: 10px 10px 0px;
    font-size: 20px;
    border-style:solid;
    border-color: #5f9341;;
    background-color: #5f9341;
    color: aliceblue;
}
<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" />
    <link rel="stylesheet" href="index.css">
    <title>chrome extension</title>
  </head>
  <body>
      <!-- input field for writting inside -->
    <div>
      <input type="text" id="input-el" />
    </div>
    <!-- save button to save the input -->
    <div>
      <button id="input-btn">SAVE INPUT</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>
css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions