Inline- eller blockelement
Med CSS kan man göra om fraselement till blockelement och tvärtom. Detta sätter de flesta reglerna om elementens naturliga beteende ur spel och ger en ganska stor frihet vad gäller design och sidlayout.
Egenskapen display
kan användas för att styra om elementet ska bete sig som ett fraselement eller ett blockelement. Är elementet ett fraselement från början, men du vill kunna tillämpa typiska blockegenskaper, ska du använda display:block
.
Element som får denna egenskap, kan plötsligt använda egenskaper som tidigare inte var möjliga eller gjorde någon direkt nytta. T.ex. bredd och höjd, kantlinjer, marginaler och utfyllnad. Ett exempel är länkelementet, som du nu kan ge diverse överrullningseffekter.
a {display:block; width:150px; height:30px; border:1px solid #000} a:hover {border:1px solid #ccc}
Det motsatta förhållandet får man när blockelement blir fraselement. Då används värdet inline
till display
. Kan t.ex. användas på rubriker och stycken om man vill att de ska gå i varandra.
<h3 style="display:inline">Rubrik</h3> <p style="display:inline">Lorem ipsum dolor sit amet...</p>