Description
According to the special note on the definition of 'Block Layout' in CSS Box Model Module Level 4:
"This module originally contained the CSS Level 3 specification prose relating to box generation (now defined in [css-display-3]), the box model (defined here), as well as block layout (now only defined in [CSS2] Chapters 9 and 10). Since its maintenance was put aside during the development of CSS2.1, its prose was severely outdated by the time CSS2 Revision 1 was finally completed. Therefore, the block layout portion of the prose has been retired, to be re-synched to CSS2 and updated as input to a new Block Layout module at some point in the future."
Currently, the specification for width, height, and margin calculations for non-absolutely positioned elements in normal flow is defined under:
In particular, CSS2 Section 10.3.3. Block-level, non-replaced elements in normal flow states:
The following constraints must hold among the used values of the other properties:
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block...
If there is exactly one value specified as
auto, its used value follows from the equality.
Scenario:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#parent {
width: 200px;
height: 100px;
background-color: blue;
}
#child {
background-color: red;
margin-left: 0;
border-left-width: 0;
padding-left: auto;
width: 100px;
padding-right: 0;
border-right-width: 0;
margin-right: 0;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">BOX</div>
</div>
<script>
const element = document.getElementById("child");
const styles = getComputedStyle(element);
console.log("padding-left:", styles.paddingLeft); // 0
</script>
</body>
</html>Expected result:
The used value for padding-left should be 100px.
Actual result:
(Tested on both Chrome and Firefox)
The used value for padding-left is 0px.