HTML-innrykk på alle sider. Hvordan fjerne innrykk øverst og nederst på en liste? Utfylling med CSS-egenskapen "padding".
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 marger 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 på toppen, 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>Beskrivelse
Margin-top CSS-egenskapen setter margin på toppen av et element. Polstringen er avstanden fra den ytre kanten av toppkanten til det gjeldende elementet til den indre grensen til det overordnede elementet eller til kanten av elementet over det. Vær oppmerksom på at inline-elementer (display : inline;) bare kan ha venstre og høyre marger.
Størrelsen på den ytre topppolstringen kan spesifiseres i piksler (px), prosent (%) eller andre CSS-enheter. Verdien kan enten være positiv eller negativ.
Merk: Bunn- eller topppolstringen til et underordnet element kan påvirke den totale høyden til det overordnede elementet med mindre det har en fast høydestørrelse.
Slå sammen felt
- Feltene med søsterelementer som ligger under hverandre og som ligger i dokumentflyten, er kombinert til ett felles. Høyden på den resulterende margen er lik høyden på den største av de to margene, for eksempel: marginen på toppelementet (margin-nederst) er 10px , og marginen til bunnelementet (margin-top) er 20px , vil en enkelt marg i dette tilfellet være 20px høy.
- Sammenslåing av marger for et overordnet og underordnet element som er i flyten av dokumentet skjer hvis det overordnede elementet ikke har noe som skiller margen fra margen til underelementet (kantlinje, utfylling eller innebygd innhold). Feltsammenslåing vil heller ikke skje hvis det overordnede elementet har overflyt-egenskapen satt til skjult eller auto . Fordelen med denne metoden er at størrelsen på det overordnede elementet ikke øker.
Anya skrev følgende kode (eksempel 1) og mottok siden vist i fig. 1. Men Anya trenger at det ikke er mellomrom mellom blokkene, så vel som til høyre og venstre for blokkene. Hvilke endringer i koden kreves for dette?
Det er for mye mellomrom mellom tittelen og brødteksten, hvordan kan jeg redusere det?
Til avsnitt (tag
) og overskrift (tag
) legger automatisk til topp- og bunnmarger, som til sammen gir stor avstand mellom tittel og tekst. For å redusere mengden innrykk, må du eksplisitt legge til egenskapen margin-bottom til H1-velgeren. I tillegg kan du angi en positiv, null eller negativ verdi. På denne måten er det enkelt å stille inn ønsket innrykkverdi.
Hvordan kan jeg legge til et førstelinjeinnrykk for hvert avsnitt?
Når du trenger å angi avsnittsinnrykk, er det best å bruke stilegenskapen tekstinnrykk. Verdien bestemmer hvor mye teksten i den første linjen skal flyttes til høyre fra den opprinnelige posisjonen. Bredden på tekstblokken endres ikke og forblir spesifisert til å begynne med. Mengden innrykk kan angis i piksler, prosenter eller andre tilgjengelige enheter (eksempel 1).
Hvordan fjerne innrykk øverst og nederst på en liste?
Bruk egenskapene margin-top og margin-bottom for UL- eller OL-velgeren, avhengig av listetypen. Du kan også bruke den generiske margin-egenskapen.
Hvordan endre innrykk på en nettside?
Utfylling på en nettside, selv om den ikke er synlig, tillater ikke innhold å passe inn i kantene av nettleservinduet for en komfortabel leseopplevelse. Du kan angi din egen utfyllingsverdi ved å endre verdiene til margegenskapen til kroppsvelgeren.
Hvordan fjerne polstring rundt et skjema?
Når du legger til et skjema via en tag