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