Margin Vs. Polstring i Internet Explorer 7

Forskjellene mellom marginer og padding er ikke klart for mange håpefulle Webdesignere som er nye for Cascading Style Sheets. Internet Explorer 7 har bedre støtte for CSS enn IE6, men nettleseren har fortsatt noen quirks. For å lage et nettsted som er kompatibel på tvers av flere nettlesere, bør du vite både forskjellen mellom marginer og padding, samt enkelte fikser du kanskje trenger å legge til koden for å lage en side vises riktig i IE7.

marginene

Marginene legge en hvit ramme rundt kanten av et element. Marginene påvirke hvor nær andre elementer er til hverandre. Marginene kan være enten positiv eller negativ. Hvis en margin verdi er lav nok, vil elementer overlappe. Internet Explorer har to ikke-standard HTML-attributter, kalt "topmargin" og "leftmargin", som fjerner toppen og venstre side av en web-dokument. W3C, en forening som bestemmer dagens webstandarder, deprecates bruken av disse attributtene, siden CSS tilbyr mer fleksible og effektive løsninger for å oppnå de samme resultatene. Standard margin egenskaper som brukes i CSS inkluderer følgende: "margin", "margin-top", "margin-bottom", "margin-right" og "margin-left".

padding

Stoppinnsatser filler langs den innvendige kanten av et element. I motsetning til marginer, er padding ikke gjennomsiktig. Det vedtar bakgrunnsfargen av elementet det modifiserer. På 90-tallet, webdesignere ofte brukt "cellpadding" for å legge til ekstra plass til området inne i en tabellcelle, men siden bordene ikke har mye hensikt i moderne web-design, og siden CSS kan gi samme effekt, attributtet er sjelden brukt. Internet Explorer 7 og andre moderne nettlesere bruke "padding", "padding-top", "padding-bottom" og "padding-left" egenskaper for å legge til padding til elementer.

verdier

Marginene kan bruke en av følgende verdier: auto, lengde,% eller arve. "Auto" gjør at nettleseren til å definere størrelsen på margene; "Lengde" angir den faste verdien av en margin bruker en støttet enhet, som "px", "pt" eller "em"; "%" Angir prosent av plass marginen tar opp; og "arve" fatter verdiene for den overordnede element. Padding fungerer på samme måte, bortsett fra at den ikke inkluderer en "auto" verdi.

quirks

Microsoft fikset IE6 dobbel-margin bug som, men introduserte en ny feil i IE7. Internet Explorer 7 ignorerer "margin-bottom" tag i et flytende element, selv om den har ingen problem rendering "padding-bottom». En vanlig løsning består av å sette flottøren inn i en overordnet element, deretter tilsetning "padding-bottom" til den overordnede element for å oppnå det samme resultatet som "margin-bottom".