Left and left fields give different values with the same percentage
I have a div with:
width:100%;
max-width:100%;
position:relative;
overflow:hidden;
The immediate child of this div:
.my-class {
position:absolute;
bottom:6px;
padding-left:12px;
}
I want the child div to match with other content. Nothing outside of this div affects this. When I use left:30%
, I get one number, when I use margin-left:30%
, I get another (which in this case is what I want).
Does the margin preserve the capitalization value on the left and left?
Or is there some other factor that I have not considered?
+3
source to share
1 answer
Yes.
The padding affects the margin.
Take a look at this example:
div, span {
border: 1px solid #000;
height: 80px;
width: 80px;
}
.left, .marginLeft {
background: #aaf;
margin: 10px 0 0 10px;
padding: 10px;
position: relative;
}
.abs {
background: #faa;
position: absolute;
top: 0;
}
.left .abs {
left: 100px;
}
.marginLeft .abs {
margin-left: 100px;
}
<h3>Left</h3>
<div class="left">
parent
<div class="abs">left</div>
</div>
<h3>Margin left</h3>
<div class="marginLeft">
parent
<div class="abs">margin left</div>
</div>
+4
source to share