ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ನ ಸಂಕ್ಷಿಪ್ತ ಅವಲೋಕನ

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಸಿಎಸ್ಎಸ್ ಬಾಕ್ಸ್ ಮಾದರಿ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಈ ಸಂಕ್ಷಿಪ್ತ ಆಸ್ತಿ ಒಂದು HTML ಅಂಶದ ಎಲ್ಲಾ ನಾಲ್ಕು ಕಡೆಗಳಲ್ಲಿ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಪ್ರತಿ HTML ಟ್ಯಾಗ್ಗೆ (ಟೇಬಲ್ ಟ್ಯಾಗ್ಗಳ ಕೆಲವು ಹೊರತುಪಡಿಸಿ) ಅನ್ವಯಿಸಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಅಂಶದ ಎಲ್ಲಾ ನಾಲ್ಕು ಬದಿಗಳು ಬೇರೆ ಮೌಲ್ಯವನ್ನು ಹೊಂದಬಹುದು.

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಆಸ್ತಿ

ಸಂಕ್ಷಿಪ್ತ ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಆಸ್ತಿ ಬಳಸಲು, ನೀವು ನೆನಪಿನ "TRouBLe" (ಅಥವಾ "ಟ್ರೆಬಿಬ್ಲಿ" ಅನ್ನು ನೀವು ಸ್ಟಾರ್ ಟ್ರೆಕ್ ಅಭಿಮಾನಿಗಳಿಗಾಗಿ ಬಳಸಬಹುದು) ಬಳಸಬಹುದು. ಇದು ಉನ್ನತ , ಬಲ , ಕೆಳಗೆ , ಮತ್ತು ಎಡಕ್ಕೆ ನಿಂತಿದೆ ಮತ್ತು ನೀವು ಸಂಕ್ಷಿಪ್ತ ಆಸ್ತಿಯಲ್ಲಿ ಹೊಂದಿಸುವ ಪ್ಯಾಡಿಂಗ್ ಅಗಲಗಳ ಕ್ರಮವನ್ನು ಇದು ಉಲ್ಲೇಖಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

ಪ್ಯಾಡಿಂಗ್: ಮೇಲಿನ ಬಲ ಕೆಳಗೆ ಎಡ; ಪ್ಯಾಡಿಂಗ್: 1px 2px 3px 6px;

ನೀವು ಮೇಲೆ ಪಟ್ಟಿ ಮಾಡಲಾದ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿದರೆ, ನೀವು ಅದನ್ನು ಅನ್ವಯಿಸುವ ಯಾವುದೇ ಎಚ್ಟಿಎಮ್ಎಲ್ ಅಂಶದ ಪ್ರತಿಯೊಂದು ಬದಿಯಲ್ಲೂ ವಿಭಿನ್ನ ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ನೀವು ಎಲ್ಲಾ ನಾಲ್ಕು ಕಡೆಗಳಿಗೆ ಅದೇ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಸರಳೀಕರಿಸಬಹುದು ಮತ್ತು ಕೇವಲ ಒಂದು ಮೌಲ್ಯವನ್ನು ಬರೆಯಿರಿ:

ಪ್ಯಾಡಿಂಗ್: 12 px;

ಸಿಎಸ್ಎಸ್ನ ಆ ರೇಖೆಯೊಂದಿಗೆ, ಪ್ಯಾಡಿಂಗ್ನ 12 ಪಿಕ್ಸೆಲ್ಗಳು ಅಂಶದ ಎಲ್ಲಾ 4 ಬದಿಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತವೆ.

ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನ ಮತ್ತು ಎಡ ಮತ್ತು ಬಲಕ್ಕೆ ಪ್ಯಾಡಿಂಗ್ ಒಂದೇ ಆಗಿರಬೇಕು ಎಂದು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಎರಡು ಮೌಲ್ಯಗಳನ್ನು ಬರೆಯಬಹುದು:

ಪ್ಯಾಡಿಂಗ್: 24 ಪಿಎಕ್ಸ್ 48 ಪಿಕ್ಸ್;

ಮೊದಲ ಮೌಲ್ಯವು (24px) ಮೇಲಿನ ಮತ್ತು ಕೆಳಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ, ಎರಡನೆಯದು ಎಡ ಮತ್ತು ಬಲಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ.

ನೀವು ಮೂರು ಮೌಲ್ಯಗಳನ್ನು ಬರೆಯುವುದಾದರೆ, ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗವನ್ನು ಬದಲಾಯಿಸುವಾಗ ಸಮತಲ ಪ್ಯಾಡಿಂಗ್ (ಎಡ ಮತ್ತು ಬಲ) ಒಂದೇ ಆಗಿರುತ್ತದೆ:

ಪ್ಯಾಡಿಂಗ್: ಮೇಲಿನ ಬಲ ಮತ್ತು ಎಡ ಬಾಟಮ್; ಪ್ಯಾಡಿಂಗ್: 0px 1px 3px;

ಸಿಎಸ್ಎಸ್ ಬಾಕ್ಸ್ ಮಾದರಿಯ ಪ್ರಕಾರ, ಪ್ಯಾಡಿಂಗ್ ಅಂಶ / ವಿಷಯಕ್ಕೆ ಹತ್ತಿರದಲ್ಲಿದೆ. ಇದರ ಅರ್ಥ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ವಿಷಯ ಅಗಲ ಅಥವಾ ಎತ್ತರ ಮತ್ತು ನೀವು ಬಳಸುವ ಯಾವುದೇ ಗಡಿ ಮೌಲ್ಯಗಳ ನಡುವೆ ಅಂಶಕ್ಕೆ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಶೂನ್ಯಕ್ಕೆ ಹೊಂದಿಸಿದರೆ, ಅದು ವಿಷಯದಂತೆಯೇ ಒಂದೇ ಅಂಚನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯಗಳು

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಯಾವುದೇ ಅಲ್ಲದ ನಕಾರಾತ್ಮಕ ಉದ್ದ ಮೌಲ್ಯವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು. Px ಅಥವಾ em ನಂತಹ ಮಾಪನವನ್ನು ಸೂಚಿಸಲು ಮರೆಯದಿರಿ. ನಿಮ್ಮ ಪ್ಯಾಡಿಂಗ್ಗೆ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣವನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಇದು ಅಂಶ ಹೊಂದಿರುವ ಬ್ಲಾಕ್ನ ಅಗಲವನ್ನು ಶೇಕಡಾವಾರು ಆಗಿರುತ್ತದೆ. ಇದು ಮೇಲ್ಭಾಗ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ ಒಳಗೊಂಡಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

# ಕಂಟೈನರ್ {width: 800px; ಎತ್ತರ: 200px; } # ಕಂಟೈನರ್ ಪಿ {ಅಗಲ: 400 px; ಎತ್ತರ: 75%; ಪ್ಯಾಡಿಂಗ್: 25% 0; }

# ಕಂಟೇನರ್ ಅಂಶದ ಒಳಗೆ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಎತ್ತರವು # ಕಂಟೈನರ್ನ ಎತ್ತರದ 75% ಮತ್ತು ಮೇಲಿನ ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ 25% ನಷ್ಟು ಅಗಲ ಮತ್ತು ಕೆಳಭಾಗದ ಪ್ಯಾಡಿಂಗ್ಗೆ ಅಗಲವಾದ 25% ಆಗಿರುತ್ತದೆ. ಈ ಮೊತ್ತವು 300 + 200 + 200 = 700 ಪಿಎಕ್ಸ್.

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಸೇರಿಸುವ ಪರಿಣಾಮಗಳು

ಬ್ಲಾಕ್-ಮಟ್ಟದ ಅಂಶಗಳಲ್ಲಿ , ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನಾಲ್ಕು ಕಡೆಗಳಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಅಂಶವು ಈಗಾಗಲೇ ಬ್ಲಾಕ್ ಅಥವಾ ಪೆಟ್ಟಿಗೆಯಿಂದ ಕಾರಣ, ಪೆಟ್ಟಿಗೆಯನ್ನು ಬಾಕ್ಸ್ ಬದಿಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಇನ್ಲೈನ್ ​​ಅಂಶಗಳಿಗೆ ಸೇರಿಸಿದಾಗ, ಲಂಬವಾದ ಪ್ಯಾಡಿಂಗ್ ಲೈನ್ ಎತ್ತರವನ್ನು ಮೀರಿದರೆ ಇನ್ಲೈನ್ ​​ಅಂಶಕ್ಕಿಂತ ಮೇಲಿನ ಮತ್ತು ಕೆಳಗೆ ಕೆಲವು ಅಂಶಗಳನ್ನು ಅತಿಕ್ರಮಿಸಬಹುದು, ಆದರೆ ಇದು ಲೈನ್ ಎತ್ತರವನ್ನು ತಳ್ಳುವುದಿಲ್ಲ. ಇನ್ಲೈನ್ ​​ಅಂಶಗಳನ್ನು ಅನ್ವಯಿಸಲು ಅಡ್ಡ ಸಿಎಸ್ಎಸ್ ಪ್ಯಾಡಿಂಗ್ ಅಂಶ ಆರಂಭದಲ್ಲಿ ಮತ್ತು ಅಂಶ ಕೊನೆಯಲ್ಲಿ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಲೈನ್ಗಳನ್ನು ಸುತ್ತುವಂತೆ ಮಾಡಬಹುದು. ಆದರೆ ಇದು ಬಹು-ಸಾಲಿನ ಅಂಶದ ಎಲ್ಲಾ ಸಾಲುಗಳಿಗೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನೀವು ಮಲ್ಟಿ-ಲೈನ್ ಇನ್ಲೈನ್ ​​ವಿಷಯದ ಭಾಗವನ್ನು ಇಂಡೆಂಟ್ ಮಾಡಲು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

ಅಲ್ಲದೆ, CSS2.1 ರಲ್ಲಿ, ಅಗಲಕ್ಕಾಗಿ (ಅಥವಾ ಪ್ಯಾಡಿಂಗ್ ಅಗಲಗಳಿಗೆ) ಶೇಕಡಾವಾರು ಅಂಶದೊಂದಿಗೆ ಅಗಲ ಅವಲಂಬಿಸಿರುವ ಕಂಟೇನರ್ ಬ್ಲಾಕ್ಗಳನ್ನು ನೀವು ರಚಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು ಮಾಡಿದರೆ ಫಲಿತಾಂಶವನ್ನು ವಿವರಿಸಲಾಗುವುದಿಲ್ಲ. ಬ್ರೌಸರ್ಗಳು ಇನ್ನೂ ವಿಷಯಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ, ಆದರೆ ನೀವು ನಿರೀಕ್ಷಿಸುತ್ತಿರುವ ಫಲಿತಾಂಶಗಳನ್ನು ನೀವು ಪಡೆಯದಿರಬಹುದು. ನೀವು ಅದರ ಬಗ್ಗೆ ಯೋಚಿಸಿದರೆ, ನಿಮ್ಮ ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ಅದರ ಅಗಲವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಲುವಾಗಿ ಅದರ ಪೂರ್ವನಿರ್ಧಾರಿತ ಅಗಲವನ್ನು ಹೊಂದಿಲ್ಲದಂತಹ ಮತ್ತು ಅದರಲ್ಲಿ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನವುಗಳನ್ನು ಹೊಂದಿರುವಂತೆ ಅದರ ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ತಿಳಿದುಕೊಳ್ಳಬೇಕಾದಂತೆ ಅದು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ. ಧಾರಕ ಅಂಶದ ಶೇಕಡಾವಾರು ಒಂದು ಅಗಲವನ್ನು ಹೊಂದಿಸಿ, ಇದು ಉತ್ತರವಿಲ್ಲದ ವೃತ್ತಾಕಾರದ ಸರಣಿಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಏನನ್ನಾದರೂ ಅಗಲಕ್ಕಾಗಿ ಶೇಕಡಾವಾರುಗಳನ್ನು ನೀವು ಬಳಸಿದರೆ, ಮೂಲ ಅಂಶದ ಅಗಲಗಳನ್ನು ಕೂಡಾ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.