Before sets the width of the width:inherit result to exceed the width of the parent element

A div sets the width 15%, adding: the inherit, set by the before, width, but the actual width exceeds the width of the div
< div class= "aside-left" >
< / div >
< style type= "text/css" >

. 
   .aside-left{
     width: 15%;
     float: left;
     background-color:blue;
   }
   .aside-left::before{
    content: "";
        width: inherit;
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: -1;
        background-color: inherit;
        border: inherit;
   }

</style>
.aside-left285.59:before288
Css
Mar.10,2021

add position: relative;

to .aside-left 
.aside-left {
    position: relative;
    width: 15%;
    float: left;
    background-color:blue;
}

position: absolute is located relative to position attribute that is not static recent ancestor element. If it is positioned relative to .aside-left , you need to modify the position property.

aside-left width width:15% is calculated based on the width of its parent element
aside-left::before width width:inherit inherits aside-left to width:15%
also because aside-left::before is the position:absolute absolute positioning width is calculated based on the ancestor of the nearest relative positioning

the above problem is because the width of the two is 15% of the calculated body and 15% of the calculated html
, while the browser default style body {margin: 8px;}
, so the calculated width difference is 8x2x15% = 2.4

.

Previous: Input background error report

Next: How does the vue single-page application add meta headers and pre-rendering to dynamically routed pages?

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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e56fb4-5a442.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e56fb4-5a442.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?