Reunukset ja pehmusteet voivat olla hämmentäviä, koska ne näyttävät tietyllä tavalla sam alta: kuvan tai objektin ympärillä on tyhjä tila. Tässä on se, mitä sinun verkkosuunnittelijana sinun on tiedettävä niiden eroista.
Padding
Täyte on kuvan tai solun sisällön ja sen ulkoreunuksen välinen tila. Alla olevassa kuvassa pehmuste on sisällön ympärillä oleva keltainen alue. Tässä tapauksessa pehmuste kiertää kokonaan sisällön ympärillä: ylä-, ala-, oikea- ja vasen puoli. Voit määrittää, kuinka paljon täytettä (prosentteina, pikseleinä, pisteinä jne.) kummallekin sivulle, eikä niiden tarvitse olla samat. Tällä tavalla voit sijoittaa sisältöä elementtiin.
Marginaalit
Sitä vastoin marginaalit ovat elementin reunan ulkopuolella elementin ja sen vieressä olevan tilan väliä. Kuvassa marginaali on valkoinen alue koko kohteen ulkopuolella. Kuten pehmuste, marginaali kiertää kokonaan sisällön ympärillä tässä esimerkissä: ylä-, ala-, oikealla ja vasemmalla puolella. Voit käyttää marginaaleja sijoittaaksesi div-merkit ja muut elementit sivulle.
Testaa sivujasi aina eri selaimissa, käyttöjärjestelmissä (mukaan lukien mobiililaitteet) ja näyttökokoissa varmistaaksesi, että ne näkyvät juuri niin kuin haluat.