11. Storlek

start  ||   föregående  ||   nästa

Med CSS går det väldigt lätt att anpassa elements storlekar.

height
Anger det absoluta värdet för höjden på ett element.

Ex.

<body>
   <table style="border: green solid thin; height: 200px">
      <tr>
         <td>
            Text
         <td>
      <tr>
   </table>
</body>

Här har vi tagit en vanlig tabell och satt dess höjd till 200 pixlar:

Text
width
Widht sätter ett elements bredd på samma sätt som height sätter dess höjd.

Ex.

<body>
   <table style="border: green solid thin; height: 200px; width: 300px">
      <tr>
         <td>
            Text
         <td>
      <tr>
   </table>
</body>

Nu tar vi samma tabell och sätter dessutom dess bredd till 300 pixlar:

Text
vertical-align
Vertical-align-elementet justerar ett element i höjdled inom den yta det har till sitt förfogande. Några av de viktigaste värdena vertical-align-elementet kan ha är:
  • top
  • middle
  • bottom
  • baseline
Låt oss arbeta vidare med exemplet ovan som vi påbörjat.

Ex.

<body>
   <table style="border: green solid thin; height: 200px; width: 300px">
      <tr>
         <td style="vertical-align: middle">
            Text
         <td>
      <tr>
   </table>
</body>

Här har vi satt textelementet till middle:

Text

...och här till bottom:

Text

Valid XHTML 1.1!