Why does css position:fixed use padding to lean to the right as a whole?

  <div class="footer">
  
    <div class="button"> </div>
    <div class="text">20.00</div>
  
  </div>
.footer{
    width:100%;
    position:fixed;
    height:200px;
    background-color:red;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:0 10px; //padding
    }

.button{
    border:1px solid blue;
    text-align:center;
    line-height:40px;
    width:80px;
    height:40px;
    }

when padding:0 10px; Why does the right 20.00 exceed browser editing on the right?

Css
Nov.21,2021 
box-sizing:border-box;

setting box-sizing:border-box can solve the problem.
has nothing to do with position:fixed; . The main reason is that display: flex; will turn the current dom box model into a standard model, and the calculation width will not take padding

. 
/*  */
box-sizing:content-box;
 /*IE*/
box-sizing:border-box;

you need to know the CSS box model first, and then come back to look at this problem and you will understand

Previous: Elasticsearch 9300 port cannot be connected

Next: The H5 page is preloaded and then displayed.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu