|
|
|
|
|
by c-smile
3381 days ago
|
|
So if I have this: img-row {
display: block flow;
}
and markup <img-row>
<img src=1.png>
<img src=2.png>
<img src=3.png>
</img-row>
I will still have a problem with white space appearance between image of these [inline-]blocks ?While with this: img-row {
display: block;
flow:horizontal;
}
child images will be treated as blocks and so white spaces will not go into rendering/layout tree of the img-row.So again partial solution, sigh. |
|
1. The parent has `display-inside: flow` or `display-inside: flow-root` (ie, the "original", pre-flexbox, formatting contexts)
2. The children have `display-outside: inline` In any other combination, the source-whitespace disappears, in some way or other.----
What I think you want, a horizontal row disregarding source-whitespace, could be achieved with `display-inside: flex` (eg, `display: flex`, `display: inline-flex`) on the parent (with `flex-direction: row` being the default). So:
aka aka (though this syntax has been temporarily removed) aka ----Note that this longhand syntax doesn't seem to be implemented in Chrome, at least, yet. So if you want to check it out, you'll have to work in the shorthand (still translatable from the longhand as specified in the draft spec https://drafts.csswg.org/css-display/#propdef-display).