While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference?
I have applied the following CSS to both HTML structures:
.time {
position: relative;
top:100px;
height: 5px;
background: red;
border-radius:5px;
text-align: justify;
font-size: 0.1px;
padding: 0px 10px;
}
.time > .snapshot {
position: relative;
display: inline-block;
width:2px;
height: 13px;
top: -5px;
background: red;
}
.time:after {
content:'';
width: 100%;
display: inline-block;
}
Now, let's look at the HTML - Strange behavior:
<div class="time" >
<div class="snapshot" ></div><div class="snapshot" ></div>
</div>
Check out this JSFiddle for more information
Expected behavior:
Here is another example on JSFiddle
Update
I experimented with inline-block and justify, and encountered another strange example:
<div style="text-align: justify;">
test test test
<div style="display: inline-block; width: 100%;">test test</div>
test test test
</div>
View the JSFiddle example here
I am curious as to why the second anonymous inline element is not justified.