Okraje a výplne môžu byť mätúce, pretože v niektorých ohľadoch vyzerajú ako to isté: biely priestor okolo obrázka alebo objektu. Tu je to, čo ako webový dizajnér potrebujete vedieť o ich rozdieloch.
Padding
Padding je priestor medzi obrázkom alebo obsahom bunky a jej vonkajším okrajom. Na obrázku nižšie je výplňou žltá oblasť okolo obsahu. V tomto prípade výplň prechádza úplne okolo obsahu: horná, spodná, pravá a ľavá strana. Môžete určiť, koľko výplne (v percentách, pixeloch, bodoch atď.) pre každú stranu a nemusia byť rovnaké. Týmto spôsobom môžete umiestniť obsah v rámci prvku.
Margins
Naproti tomu okraje sú medzery mimo hranice prvku, medzi prvkom a čímkoľvek, čo k nemu susedí. Na obrázku je okraj biela oblasť mimo celého objektu. Rovnako ako výplň, okraj v tomto príklade úplne obklopuje obsah: na hornej, spodnej, pravej a ľavej strane. Okraje môžete použiť na umiestnenie prvkov div a ďalších prvkov na stránke.
Vždy testujte svoje stránky v rôznych prehliadačoch, operačných systémoch (vrátane mobilných zariadení) a veľkostiach obrazoviek, aby ste sa uistili, že sa zobrazujú presne tak, ako chcete.
