Innrykk og marger i html. CSS-marginer og polstring: forskjeller mellom margin- og polstringsegenskapene. Gamle justeringsmetoder

I forrige kapittel nevnte vi slike CSS-egenskaper, som margin (felt) og polstring (innrykk). Nå skal vi se på dem mer detaljert og vurdere hvordan de skiller seg fra hverandre og hvilke funksjoner de har.

Du kan lage mellomrom mellom elementer på en eller annen måte, men hvis utfylling er fordypningen fra innholdet til kanten av blokken, så er margen avstanden fra en blokk til en annen, mellomrommet. Skjermbildet viser et tydelig eksempel:

Utfylling skiller innhold fra blokkkanten, og margen skaper hull mellom blokkene

Som du kan se, skiller CSS-marginer og polstring seg fra hverandre, men noen ganger uten å se på koden er det umulig å bestemme hvilken egenskap som brukes til å angi avstanden. Dette skjer når rammen eller bakgrunnen til innholdsblokken mangler.

Følgende egenskaper finnes for å angi margin eller utfylling i CSS på hver side av et element:

Polstring:

  • polstring-topp: betydning;
  • polstring-høyre: betydning;
  • polstring-bunn: betydning;
  • polstring-venstre: betydning;

Enger:

  • margin-top: betydning;
  • marg-høyre: betydning;
  • marg-bunn: betydning;
  • marg-venstre: betydning;

Verdier kan spesifiseres i alle CSS-enheter - px, em, % osv. Eksempel: margin-top: 15px .

Det er også en veldig praktisk ting som stenografi for margin og polstring CSS. Hvis du trenger å angi marger eller polstring på alle fire sidene av et element, trenger du ikke å skrive egenskapen for hver side individuelt. Alt er gjort enklere: for margin og utfylling kan du spesifisere 1, 2, 3 eller 4 verdier samtidig. Antall verdier bestemmer hvordan innstillingene fordeles:

  • 4 verdier: polstring settes for alle sider av elementet i følgende rekkefølge: topp, høyre, bunn, venstre: polstring: 2px 4px 5px 10px;
  • 3 verdier: polstringen settes først for oversiden, deretter samtidig for venstre og høyre, og deretter for bunnen: polstring: 3px 6px 9px;
  • 2 verdier: polstringen settes først samtidig fra topp- og bunnsiden, og deretter samtidig for venstre og høyre: polstring: 6px 12px;
  • 1 verdi: lik polstring er satt for alle sider av elementet: polstring: 3px;

De samme reglene gjelder for CSS-marginegenskapen. Vær oppmerksom på at du også kan bruke negative verdier for margin (for eksempel -3px), noe som noen ganger kan være ganske nyttig.

Skjul margin

Se for deg situasjonen: to blokkelementer er plassert oppå hverandre og de får marginfelt. Den øverste blokken er satt til marg: 60px, og den nederste blokken er satt til marg: 30px. Det ville være logisk å anta at de to grensende feltene til to elementer ganske enkelt vil berøre, og som et resultat vil gapet mellom blokkene være lik 90 piksler.

Men ting er annerledes. Faktisk, i en slik situasjon, oppstår en effekt som kalles kollaps, når den største i størrelse velges fra to tilstøtende felt med elementer. I vårt eksempel vil det endelige gapet mellom elementene være 60 piksler.


Avstanden mellom blokkene er lik den største av verdiene

Samling av marg fungerer kun for topp- og bunnmargen på elementer og gjelder ikke margene på høyre og venstre side. Den endelige gapverdien beregnes forskjellig i forskjellige situasjoner:

  • Når begge marginverdiene er positive, vil den resulterende marginstørrelsen være lik den største verdien.
  • Hvis en av verdiene er negativ, må du få summen av verdiene for å beregne størrelsen på feltet. For eksempel, med verdier på 20px og -18px vil feltstørrelsen være:
    20 + (-18) = 20 – 18 = 2 piksler.
  • Hvis begge verdiene er negative, sammenlignes modulene til disse tallene og tallet med den største modulen (derav den minste av de negative tallene) velges. Eksempel: du må sammenligne verdiene til -6px- og -8px-feltene. Modulene til tallene som sammenlignes er henholdsvis 6 og 8. Det følger at 6 -8. Den resulterende feltstørrelsen er -8 piksler.
  • I tilfellet hvor verdiene er spesifisert i ulike enheter CSS, de reduseres til én, hvoretter de sammenlignes og den største verdien velges.
  • Marginstørrelsen for underordnede elementer bestemmes på en enda mer interessant måte: hvis et barn har en større margin enn forelderen, blir det prioritert. I dette tilfellet vil størrelsen på topp- og bunnmargen til forelderen være de samme som spesifisert for barnet. I dette tilfellet vil det ikke være noen avstand mellom forelder og barn.

Marginer og utfylling er svært viktige stiler når du bygger en HTML-side. De lar deg plassere elementer mer nøyaktig, lage en ramme med nødvendige hull, etc. Begge stilene er veldig like og utfører lignende funksjoner. Men det er fortsatt forskjeller.

Elementer kan være nestet eller plassert ved siden av hverandre. La oss se på følgende eksempel:

Vi har to bord, sitron og blå, plassert under hverandre. Tabeller består av én celle. Det er en rød blokk i den første tabellcellen. Ved å bruke dette eksemplet, la oss se på hvordan marginer og innrykk fungerer.

Felt er satt etter stil polstring. Denne stilen gjelder bare for beholderelementer, som kan inneholde andre elementer. Stilen lar deg angi margen mellom kantene på et element og innholdet. Stil margin lar deg sette innrykk fra et element til de nærmeste kantene til et annet element. Kantene til et annet element kan være kantene til den overordnede beholderen, så vel som kantene på selve siden.

Det er flere måter å angi disse stilene på. Spesifiser for eksempel størrelsen på alle marger eller innrykk direkte med ett argument i en eller annen måleenhet (px, ex, em, pt, cm, og så videre):

polstring: 3px; margin: 3px;

I dette tilfellet vil margene og innrykk være de samme på alle fire sider. Når du spesifiserer to argumenter atskilt med et mellomrom:

polstring: 3px 5px; margin: 3px 5px;

den første vil bestemme mengden marginer/innrykk øverst og nederst, den andre - til venstre og høyre. Når gitt tre argumenter:

polstring: 3px 5px 2px; margin: 3px 5px 2px;

den første er margen/innrykket øverst, den andre er både venstre og høyre, den tredje er nederst. Med fire argumenter:

polstring: 3px 5px 2px 6px; margin: 3px 5px 2px 6px;

den første er margen/mellomrommet øverst, den andre er til høyre, den tredje er nederst, den fjerde er til venstre. Det er lett å huske: den første er fra toppen, deretter med klokken. I tillegg kan du angi marger og polstring for en spesifikk kant separat, ved å bruke de riktige stilene: polstring-topp, polstring-høyre, polstring-bunn, polstring-venstre, margin-topp, marg-høyre, marg-bunn, marg-venstre. Verdien av disse stilene kan bare være ett argument, som spesifiserer mengden margin/utfylling for en gitt side.

I figuren er den røde blokken inne i tabellcellen og ved siden av dens grenser, det vil si at cellen ikke har noen marginer. La oss sette cellemarginene ved å bruke stilen:

polstring: 5px;

Som et resultat vil siden endres til følgende:

La oss nå se på innrykk. To bord ligger ved siden av hverandre, hvis vi ønsker å flytte dem litt fra hverandre kan vi bruke innrykk. Det er to alternativer her: enten angi nederste innrykk i den første tabellen, eller toppinnrykk i den andre tabellen. La oss bruke den andre:

marg-top: 5px;

Vær oppmerksom på at vi setter innrykk spesifikt til tabellen, og ikke til tabellcellen, slik tilfellet er med felt. Her er resultatet:

Forresten, i det første tilfellet (gapet mellom den røde blokken og grensene til den overordnede cellen), kan den samme effekten oppnås ved å sette blokkinnrykk. Generelt, hvis noe ikke er klart, gi oss beskjed i kommentarene.

HTML-kode for testsiden:

<html > <hodet > <tittel > Test</tittel> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </hode> <kroppen > <stil > tabell (bredde: 200px; høyde: 150px; border: 1px solid #555; border-collapse: collapse) td (vertical-align: top; polstring: 0px) div (bredde: 100px; høyde: 100px; bakgrunn: rød)</stil> <tabellstil = "bakgrunn: lime" > <tr > <td style = "polstring: 5px" > <div style = "margin: 0px" ></div> </td> </tr> </tabell> <bordstil = "bakgrunn: himmelblå; margin-top: 5px"> <tr > <td ></td> </tr> </tabell> </body> </html> Polstring-topp

Jeg håper du allerede er kjent med strukturen til blokken. Hvis ikke, er det presentert nedenfor.

Blokkstruktur

Så. Du vet sikkert allerede at marginene og marginene til en blokk er representert av henholdsvis utfyllings- og margegenskapene. Og i den forrige artikkelen har vi allerede delvis berørt dette emnet. På denne siden skal vi se nærmere på feltene ( polstring) og polstring ( margin ).

Margin- og polstringsegenskapene er veldig like hverandre og utfører lignende funksjoner, og det er derfor de ofte forveksles. Men selvfølgelig bør du ikke gjøre dette, siden marginer og innrykk er helt forskjellige ting. Dette er imidlertid godt synlig fra figuren, for det er ikke tilfeldig at det vises her.

Så. Marginer er spesifisert av padding-egenskapen. Dette er de interne avstandene fra blokkgrensene til innholdet.

Egenskapen gjelder for alle elementer.

Avstanden er spesifisert i CSS-lengdeenheter, % eller ( misligholde

Padding-egenskapen er universell fordi den setter margene fra kantene til et element til innholdet for alle sidene, og kombinerer dermed egenskapene padding-top , padding-right , padding-bottom og padding-left , som setter bredden på marginer for hvert sideelement individuelt.

Innrykk settes ved hjelp av egenskapen margin, som bestemmer avstanden fra blokkgrensene til de nærmeste elementene eller til kantene av nettleservinduet.

Margin-egenskapen gjelder også for alle elementer.

Utfylling er også spesifisert i CSS-lengdeenheter, % eller ( misligholde) oppdages automatisk av nettleseren.

Margin-egenskapen er universell, ettersom den angir mengden innrykk fra kantene til et element for alle dets sider, og kombinerer dermed egenskapene margin-top , margin-right , margin-bottom og margin-venstre , som setter bredden på innrykk. fra hver av elementets grenser individuelt .

Og en ting til: innrykk ( margin) er plassert utenfor blokken, mens marginer ( polstring) inne i den, så bakgrunnen til blokken eller den bakgrunnsbilde gjelder bare margene, og innrykkene er alltid gjennomsiktige eller har bakgrunnen til den viktigste ( foreldrenes) blokk eller sidebakgrunn.

Kodebit:



; ">

Bordet er plassert inne i en beholder med rød kant og blå bakgrunn.


Utfyllingsbredden fra bordkanten til den røde kanten av beholderen er 10 piksler.


Cellen til venstre inneholder et bilde. Margene fra bildet til cellekantene er 25 piksler.


Marginen til høyre celle er 10 piksler!


Sist oppdatert: 04.08.2016

Et enkeltlinjes tekstfelt opprettes ved å bruke input-elementet når typeattributtet er satt til tekst:

Du kan tilpasse tekstfeltet ved å bruke en rekke tilleggsattributter:

    dirname: angir retningen til teksten

    maxlength : det maksimale antallet tegn som er tillatt i et tekstfelt

    mønster : definerer mønsteret som inndatateksten skal samsvare med

    plassholder : Angir teksten som vises som standard i tekstboksen

    skrivebeskyttet : Gjør tekstfeltet skrivebeskyttet

    obligatorisk : indikerer at tekstfeltet må ha en verdi

    størrelse : angir bredden tekstfelt med synlige tegn

    verdi : Angir standardverdien i tekstfeltet

La oss bruke noen attributter:

Tekstfelt i HTML5

I dette eksemplet angir den andre tekstboksen umiddelbart makslengde- og størrelsesattributtene. I dette tilfellet er størrelse - det vil si at antallet tegn som passer inn i det synlige rommet i feltet er større enn det tillatte antallet tegn. Vi vil imidlertid fortsatt ikke kunne legge inn flere tegn enn makslengde.

I dette tilfellet er det også viktig å skille mellom verdi- og plassholderattributtene, selv om begge setter den synlige teksten i feltet. Plassholder setter imidlertid et slags hint eller spørsmål om inndata, så den er vanligvis nedtonet. Mens verdi representerer standardteksten som er skrevet inn i feltet:

De skrivebeskyttede og deaktiverte attributtene gjør tekstfeltet utilgjengelig, men har en annen visuell effekt. I tilfelle deaktivert er tekstfeltet nedtonet:

Blant attributtene til et tekstfelt bør vi også merke oss et slikt attributt som list . Den inneholder en referanse til et datalisteelement, som definerer et sett med verdier som vises som et verktøytips når de legges inn i et tekstfelt. For eksempel:

Tekstfelt i HTML5

Listeattributtet til et tekstfelt peker på ID-en til datalisteelementet. Datalisteelementet selv definerer elementene i listen ved å bruke nestede alternativelementer. Og når du skriver inn et tekstfelt, vises denne listen som et verktøytips.

Søkefelt

For å lage søkefelt, bruk inndataelementet med type="search"-attributtet. Formelt sett er det et enkelt tekstfelt:

Søk i HTML5

Passordfelt

For å angi et passord, bruk input-elementet med type="password"-attributtet. Hans særpreg er at tegnene som legges inn er maskert med prikker:

I denne artikkelen vil jeg fortelle deg hvordan du plasserer riktig Enger(polstring) og innrykk(margin) i CSS.

Først av alt, la oss huske definisjonen av marginer og polstring i henhold til W3C-spesifikasjonen. I boksmodellen er margene avstanden mellom innholdet og kanten på boksen. Og polstring er avstanden mellom grensen til en blokk og grensen til et tilstøtende eller overordnet element.

Hvis grensen og bakgrunnen til elementet ikke er spesifisert, er det ingen forskjell, bruk padding- eller margin-egenskapen for å angi innrykk, men forutsatt at bredden (bredden) og høyden (høyden) til elementet ikke er spesifisert og algoritmen for å beregne innholdsstørrelser ved bruk av boksstørrelsesegenskaper.

I alle fall, husk at marginer kan eller ikke kan inkluderes i bredden eller høyden på elementet. Innrykk settes alltid utenfor elementet.

La oss nå se på hvordan du plasserer marger og mellomrom mellom elementene riktig. La oss ta følgende blokk som et eksempel.

Dette er nyhetsblokken. Den består av en overskrift, en liste over nyheter og en "Andre nyheter"-kobling. La oss gi dem følgende klassenavn: news__title, news__list og news__more-link.

Nyheter

Andre nyheter

Siden hvert av disse elementene har samme venstre og høyre marger, er det bedre å sette margene til den overordnede blokken i stedet for å angi venstre og høyre marger for hvert element individuelt.

Nyheter ( utfylling: 20px 25px; )

Derfor, hvis du trenger å endre verdien av feltene til høyre og venstre, må dette gjøres På en plass. Og når du legger til et nytt element inne i nyhetsblokken, vil det allerede ha de nødvendige innrykk til venstre og høyre.

Det hender ofte at alle elementer innenfor en blokk har samme polstring til venstre og høyre, bortsett fra ett som ikke skal ha polstring i det hele tatt, for eksempel på grunn av bakgrunnen. I dette tilfellet kan du angi negativ polstring for elementet. Da trenger du ikke å fjerne felt inne i blokken for andre elementer.

Nå må du angi de vertikale margene mellom elementene. For å gjøre dette må du bestemme hvilket av elementene som er obligatorisk. Det er klart at en nyhetsblokk ikke kan eksistere uten en nyhetsliste, samtidig kan det ikke være en "Andre nyheter"-lenke; tittelen kan også fjernes, for eksempel når designet endres.

Med dette i betraktning setter vi innrykk nederst for tittelen, og innrykk øverst for koblingen "Andre nyheter".

News__title ( margin-bottom: 10px; ) .news__more-link ( margin-top: 12px; )

Vi kunne oppnå det samme eksterne resultatet ved å legge til polstring øverst og nederst for nyhetslisten.

Nyhetsliste ( margin: 10px 0 12px 0; )

Nå må du sette innrykk mellom individuelle nyheter. Igjen, vær oppmerksom på at antall nyheter kan variere, og det kan bare være en nyhet oppført.

Du kan angi et toppinnrykk for hver nyhet bortsett fra den første, eller et nederste innrykk for hver nyhet bortsett fra den siste. Det første alternativet er å foretrekke fordi:first-child pseudo-velgeren ble lagt til i CSS 2.1-spesifikasjonen og har bredere støtte, i motsetning til:last-child pseudo-velgeren, som bare ble lagt til i CSS 3.0-spesifikasjonen.

News__list-item ( margin-top: 18px; ) .news__list-item: first-child ( margin-top: 0; )

Riktig plassering av marger og innrykk lar deg dermed endre fleksibelt utseende enhver blokk uten å gjøre endringer i stiler og uten brudd i design. Det viktigste er å finne ut hvilke blokkelementer som er de viktigste ( påbudt, bindende), og hvilke valgfri.

Noen ganger kan vi ikke stole på nødvendige elementer. For eksempel har vi et popup-vindu, inni der noen tittel og tekst kan vises. Dessuten kan det i noen tilfeller ikke være noen tekst, og i noen tilfeller kan det ikke være noen tittel. Det vil si at begge elementene er valgfrie.

I dette tilfellet kan du bruke neste vei innrykk oppdrag.

Popup__header + .popup__text ( margin-top: 15px; )

Da vil innrykk kun vises hvis begge elementene brukes. Hvis det bare vises tittelen eller bare teksten, blir det ingen ekstra innrykk.

Kollapsende vertikale marger

En annen nyanse som ikke alle vet om er knyttet til de vertikale mellomrommene mellom tilstøtende blokker. Definisjonen av innrykk som jeg ga ovenfor sier at innrykk er avstanden mellom grenser nåværende og naboblokker. Dermed, hvis vi plasserer to blokker under hverandre og gir en av dem en bunnmargin på 30px og den andre en toppmargin på 20px, vil marginen mellom dem ikke være 50px, men 30px.

Det vil si at innrykk vil overlappe, og innrykk mellom blokker vil være lik den største innrykk, og ikke summen av innrykk. Denne effekten kalles også "kollaps".

Vær oppmerksom på at horisontale innrykk, i motsetning til vertikale, ikke "kollapser", men oppsummeres. Feltene (utfylling) er også summert opp.

Når vi vet om "kollapsen" av innrykk, kan vi bruke denne funksjonen til vår fordel. For eksempel, hvis vi trenger å rykke inn overskriftene og teksten inne i en artikkel, vil vi for overskriften på første nivå sette innrykk nederst til 20 piksler, og for overskriften på andre nivå er toppinnrykk 20 piksler og bunnen er 10 piksler, og for alle avsnitt setter vi toppinnrykk til 10px.

H1 ( margin-bottom: 24px; ) h2 ( margin-top: 24px; margin-bottom: 12px; ) p ( margin-top: 12px; )

Nå kan h2-overskriften plasseres enten etter h1-overskriften eller etter avsnittet. I alle fall vil toppmarginen ikke overstige 24px.

Generelle regler

For å oppsummere vil jeg gjerne liste opp reglene som jeg følger når jeg ordner marger og innrykk.

  1. Hvis tilstøtende elementer har samme innrykk, er det bedre å sette dem til den overordnede beholderen i stedet for til elementene.
  2. Når du setter inn innrykk mellom elementer, bør du vurdere om elementet er obligatorisk eller valgfritt.
  3. For en liste over lignende elementer, ikke glem at antall elementer kan variere.
  4. Vær oppmerksom på vertikal polstring og bruk denne funksjonen der det vil være til nytte for deg.

Tagger: Legg til tagger