css Primer
În acest capitol vorbim despre marjele (proprietate) și marja de padding (proprietatea padding) membru. Între aceste două proprietăți sunt foarte asemănătoare, dar totuși ele sunt două proprietăți complet diferite.
Să ne uităm la aceste concepte ..
Domeniul (marja) - Aceasta este distanța de la limita exterioară a elementului la marginea ferestrei browser-ului sau a elementului mamă. Ei bine, limitele unității care încorporează elementul nostru.
Indentat (padding) - este distanța de la marginea interioară a elementului la conținutul său de text, tabele, imagini.
Figura arată în mod clar aceste distanțe, precum și locul ocupat de o graniță (de frontieră) cu privire la aceasta, de asemenea, nu ar trebui să fie uitată.
Distanțe marjă și padding indică:
- px - în pixeli sau orice alte unități CSS valide.
- % - Procentajul.
- auto - marjele și marjele calculate automat de către browser.
Să încercăm să facă același lucru, așa cum se arată în figură, folosind blocuri
Încercați să modificați valoarea marjei și padding proprietățile și veți vedea ce e ceea ce. și dacă da, este de înțeles muta pe ..
In exemplul de mai sus, atribuirea de proprietăți margine și o valoare de umplutură, am identificat câmp și elementul de umplutură din toate cele patru laturi. Pentru a specifica dimensiunile de câmp diferite și marginile pentru fiecare dintre laturile elementului, trebuie să specificați două, trei sau patru argumente separate printr-un spațiu. Mai mult decât atât, în funcție de numărul de valori de ieșire vor fi diferite.
margin: 5px; - o singură valoare.
O valoare - Marjele pe toate laturile.
margin: 5px 40px; - două valori.
Prima valoare - Setează câmpul de limitele superioare și inferioare.
A doua valoare - Setează domeniile frontierelor celula din stânga și din dreapta.
margin: 5px 40px 20px; - trei valori.
Prima valoare - Setează câmpul de la marginea de sus a unui element.
A doua valoare - Setează domeniile frontierelor celula din stânga și din dreapta.
A treia valoare - Setează câmpul din partea de jos a frontierei elementului.
margin: 5px 40px 20px 1pixel; - patru valori.
Prima valoare - Setează câmpul de la marginea de sus a unui element.
A doua valoare - Setează câmpul de la marginea dreaptă a unui element.
A treia valoare - Setează câmpul din partea de jos a frontierei elementului.
A patra valoare - Setează câmpul de frontiera din stânga a unui element.
Cu umplutură se întâmplă în același mod ca și cu marja. compenseaza din elementul de frontieră internă pentru a dobândi dimensiuni de conținut în funcție de numărul de argumente și valori.
Proprietăți marjă CSS și padding sunt de bază și au un număr de proprietăți afiliate.
- margin-top - câmpul superior al frontierei elementului mamă,
- margin-left - câmp de frontiera din stânga a elementului mamă,
- margin-dreapta - câmp de frontiera din dreapta a elementului mamă,
- margin-bottom - câmpul din partea de jos a frontierei a elementului mamă.
Și, respectiv, padding:
- padding-top - Offset din elementul de frontieră superior la conținutul său,
- padding-left - Offset de frontiera stanga a unui element la conținutul său,
- padding-dreapta - Offset de la marginea dreaptă a unui element la conținutul său,
- padding-bottom - Offset de la marginea inferioara a unui element la conținutul său.
Ei bine, cred că este clar. în cazul în care există necesitatea de a determina indentare sau un câmp dintr-un singur element al părții este cel mai bine de a folosi una dintre proprietățile de mai sus.
Padding și marjele sunt printre principalele componente ale designului site-ului, pe această temă ar trebui să urmeze câteva linii directoare.
Evitați scurt, și chiar mai mult, la zero padding a conținutului la limitele elementului, în special pentru blocuri de text. Text cu marje mici și liniuțe pentru a citi greu și „vâscos“.
Urmați regulile câmpurilor de proporționalitate și comensurabilitatea și liniuțele pentru un singur element, și pentru întreaga pagină (elemente ale compoziției), în întregime.
O modalitate de a concentra atenția asupra poziției paginii vizitatorilor dorit - această umplutură mai mare decât de obicei, un astfel de contrast forța spectatorului să vadă și să participe la locurile „speciale“ în textul ..