Position:absolute / fixed changes display-property to block
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo:
The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:
2. […] if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below.
And in that mentioned table below, you see that for the specified value inline
(which span
has by default from the user agent stylesheet), the computed value is … block
Why does my ::before element only display if I use position absolute?
You don't need to have absolute positioning. You just need to set display property for the ::before pseudo-element
html,body { margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
span { margin-bottom: 15px;}
.no-absolute::before{ content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background-color: #f33; cursor: pointer;}
<span class="no-absolute">No Absolute</span
Why does inline-block automatically adjust its width according to it's child's width?
display: inline-block
is basically a sweet-spot between display: inline;
(which is default for span
, strong
, em
, etc.) and display: block;
(which is default for div
, p
, etc).
Inline elements are built for text and thus they should flow inline with the text, and only be as wide as the text they contain. Thus, you can't set the width of an inline
element.
Block elements are made to fill all the available width by default and are thus on their own line rather than flowing inline. This is good for things like paragraphs, but sometimes you want shorter lines so it is possible to adjust the width for block
elements.
Inline-block elements are in the middle. They flow inline like display: inline;
elements, but you can set the width like display: block;
elements.
Why does this CSS margin-top style not work?
You're actually seeing the top margin of the #inner
element collapse into the top edge of the #outer
element, leaving only the #outer
margin intact (albeit not shown in your images). The top edges of both boxes are flush against each other because their margins are equal.
Here are the relevant points from the W3C spec:
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse [...]
Two margins are adjoining if and only if:
- both belong to in-flow block-level boxes that participate in the same block formatting context
- no line boxes, no clearance, no padding and no border separate them
- both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
- top margin of a box and top margin of its first in-flow child
You can do any of the following to prevent the margin from collapsing:
- Float either of your
div
elements- Make either of your
div
elements inline blocks- Set
overflow
of#outer
toauto
(or any value other thanvisible
)
The reason the above options prevent the margin from collapsing is because:
- Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
- Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
- Margins of inline-block boxes do not collapse (not even with their in-flow children).
The left and right margins behave as you expect because:
Horizontal margins never collapse.
Related Topics
Different Timing Functions for Different Parts of CSS3 Keyframe Animation? (Accurate Bounce)
Bootstrap Thumbnail Grid Not Starting a New Row Correctly
Safari Print Media Queries Not Matching Other Browsers/Cutting Off
Make CSS Shimmer Effect Work an Already Loaded Image
Mozilla 3.0.8 and Chrome Height in Em Bug Workaround
Remove Borders of Input Jquery Mobile
Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable
Flexbox Vertical Align Child Top, Center Another
Why Is "Rgb (224, 226, 213)" an Invalid Property Value
White-Space: Nowrap Is Not Working in Ie in a Horizontally Scrolling Box
Make All Images in Mat-Card-Image Same Size But Scale Correctly
Matrix 3D Transform for Obtaining Trapezoid
Take 2 Columns in 2-Columns Layout But Not When 1-Column Layout in CSS Grid Without @Media