Hvordan lage et hengende innrykk med CSS

Hvordan lage et hengende innrykk med CSS. En HTML-block-level element som et avsnitt kan bli stylet med et hengende innrykk. Elementet du styling må inneholde mer enn en linje. Følgende trinn forklarer hvordan du oppretter en hengende innrykk med CSS.

Bruksanvisning

1 Lag hengende innrykk ved hjelp av tekst-innrykk eiendom kombinert med padding-venstre. Det er best å tilordne CSS-regel til avsnitt eller annet element ved hjelp av en klasse. Her er et eksempel klasse kalt hengende innrykk:

.hanging-innrykk {
text-indent: -25px;
padding-left: 25px;
}

2 Legg merke til at den faktiske mengden av tekst-innrykk er gitt som et negativt tall; i dette tilfellet er det -25px. Så en annen regel for padding-venstre er gitt; i dette tilfellet er det 25px. Disse to verdiene trenger ikke å matche. Det eneste du må gjøre er å bruke et negativt tall for tekst-innrykk og en positiv verdi for padding-venstre.

3 Avsnittene i sidepanelet på høyre side av siden i bildet viser effekten. Hvert avsnitt i den høyre sidepanelet er tildelt klassen vist ovenfor: .hanging innrykk.

4 Hvis du har lagt en ramme til regelen, ville grensen omgir hele block level element (se bilde).