CSS Master

(Primo) #1
betweenblock-levelandinlineelements.Bydefault,elementssuchaspandsection
createblock-levelboxesbuta,span,andemcreateinlineboxes.SVG,ontheother
hand,doesnotusetheboxmodel,somostlayout-relatedCSSpropertiesfailto
workwithSVG.(ThisiscoveredinChapter 8 .)

Block-levelboxescreatenewblocksofcontentascanbeseeninFigure4.1.Block-
levelboxesarerenderedverticallyaccordingtotheirsourceorderand(exceptfor
tables)expandtofilltheavailablewidthoftheircontainingelement.Thisisknown
asnormalflow.Block-levelboxeshaveadisplayvalueofblock,list-item,table,
oranyofthetable-*values(forexample,table-cell).

Figure 4.1. Block-level boxes featuring h1, p, ul, and table elements within a containing element (gray area)

Inline-levelboxes,bycontrast,donotformnewblocksofcontent.Instead,these
boxesmakeupthelinesinsideablockbox.They’redisplayedhorizontallyandfill
thewidthofthecontainingbox,wrappingacrosslinesifnecessary,asshownin
Figure4.2.Inline-levelboxeshaveadisplayvalueofinline,inline-block,inline-
table,orruby.

130 CSS Master

Free download pdf