➜ BLOCK AND PARTIAL, A LAYOUT BASIC LOGIC ROLE:
Think how I was creating a paginated in Indesign or Metro styled where each element is self-centered, and perfectly edged and aligned... In practice it will be that.
The concept of the blocks foresees the div as a unit of line - therefore 100% wide, at the end of each new div - and the span as a partial unit - therefore relative to the content by height and width and succession -.
Same as div most of the basic "block style" elements have been formatted (ex: section, article, canvas, ecc) however it is not possible for these elements to concatenate with span creating a "borderless" layout.
The combination of div and span generates quick and easy layouts... Just understand the rules below:
The concept of the blocks foresees the div as a unit of line - therefore 100% wide, at the end of each new div - and the span as a partial unit - therefore relative to the content by height and width and succession -.
...a note apart: Can I rule this out?
Technically ... no. The framework is very similar to a professional page layout program where everything must occupy a space that is as elastic as it is predefined. However you can add a display: block (or float-grup) when you find it necessary by returning to a css that leaves spaces between one span and another.
➜ PRATICAL EXEMPLE:
A simple DIV (violet), a simple SPAN (rose):
DIV is every wide and not have margin
SPAN is every partial and not have margin
As you can see there are no margins between the parts. They wouldn't even exist if we nested them.
❯❯ THE DIV:
Every DIV of framework not have...
...linespace beetwin other DIV or SPAN.
This is a DIV inner DIV and is always wide... All pad you see is applied with an extra class.
All element inside a DIV is always wide, excluded specific exceptions, the SPAN and your customized not wide class...obviously.
❯❯ THE SPAN:
Hello
SPAN
exemple!
How you can see all span is partial and follower element. You can stop it via div or (generically) with a wide/block element (exemple: hr).
This is
multiple SPAN
inside
a SPAN wrap
❯❯ THE COMBO OF DIV IN SPAN (A SHARP LAYOUT):
SPAN inner DIV is every partial contest. So...
Do you like a menu voice?
You
Can
Crate
A
Super
Rapid
Inline
Contets
In the example we purposely impose a height of 40px to the parent. This causes each span to become 40px high and showcasing how the contents within the span are not necessarily and always centered (there are many reasons why this is so, you will understand them with experience here). The problem is easily bypassed thanks to the .autostretch class
You
Can
Crate
A
Perfect
Rapid
Aligned
Contets
Viceversa, DIV inner SPAN is every wide contest.
DIV inner SPAN is every wide contest.
If it's multiple...
This
Is
Multiple
DIV
Into
SPAN
wrap