Hvordan justere avstanden mellom avsnittene i CSS

August 19

CSS, en forkortelse for Cascading Style Sheets, lar utviklere å tilpasse utseendet på et element på en webside. Webområder som bruker CSS er lettere å vedlikeholde fordi endringer i en CSS definisjon kan oppdatere stiler av alle elementer på en webside. For eksempel ved å endre en enkelt CSS verdi, kan du justere avstanden mellom HTML avsnittselementer. Dette gjør at du kan justere din design raskt og se resultatene umiddelbart uten å endre noen streke HTML-kode.

Bruksanvisning

1 Start Notepad eller en HTML-editor. Åpne en av dine websider som inneholder flere avsnitt.

2 Legg til følgende CSS-kode blokk til dokumentets "head" -seksjonen.

<Style>
p {margin-bottom: 100px}
</ Style>

Dette skaper en CSS-klasse som styrer egenskapene til alle avsnitt på websiden. Den "margin-bottom" eiendom bestemmer hvor mye tomrom som vises på bunnen av et avsnitt. I dette eksempel er denne verdi 100 piksler.

3 Lagre dokumentet og åpne den i nettleseren din. Du vil se et stort gap mellom avsnittene fordi avsnittene har en stor verdi for sine "margin-bottom" egenskaper.

4 Gå tilbake til CSS-klasse i HTML-dokumentet. Change "100px" til "10px" og lagre dokumentet.

5 Gå tilbake til nettleseren din og trykk "F5" for å oppdatere nettsiden. Legg merke til at avstanden mellom avsnittene redusert fordi du endret "margin-bottom" eiendom fra 100 piksler til 10 piksler.

Hint

Du kan også bruke negative verdier, for eksempel "-20px" for å få avsnitt enda tettere sammen. Hvis du gjør verdien liten nok, vil begge avsnittene okkupere samme linje på websiden.