ಎಚ್ಟಿಎಮ್ಎಲ್ ವೈಟ್ಸ್ಪೇಸ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು

CSS ನೊಂದಿಗೆ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿನ ಜಾಗಗಳ ಮತ್ತು ಭೌತಿಕ ಬೇರ್ಪಡಿಕೆಗಳನ್ನು ರಚಿಸಿ

ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿನ ಸ್ಥಳಗಳ ಮತ್ತು ಭೌತಿಕ ಬೇರ್ಪಡಿಕೆಗಳನ್ನು ರಚಿಸುವುದರಿಂದ ಆರಂಭದ ವೆಬ್ ಡಿಸೈನರ್ಗಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಕಷ್ಟಕರವಾಗಿರುತ್ತದೆ. ಎಚ್ಟಿಎಮ್ಎಲ್ "ವೈಟ್ಸ್ಪೇಸ್ ಕುಸಿತ" ಎಂದು ಕರೆಯಲ್ಪಡುವ ಒಂದು ಆಸ್ತಿಯನ್ನು ಹೊಂದಿದೆ. ನಿಮ್ಮ HTML ಕೋಡ್ನಲ್ಲಿ ನೀವು 1 ಸ್ಪೇಸ್ ಅಥವಾ 100 ಅನ್ನು ಟೈಪ್ ಮಾಡಿದರೆ, ವೆಬ್ ಬ್ರೌಸರ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಒಂದೇ ಸ್ಥಳಕ್ಕೆ ಆ ಸ್ಥಳಗಳನ್ನು ಕುಸಿಯುತ್ತದೆ. ಇದು ಮೈಕ್ರೋಸಾಫ್ಟ್ ವರ್ಡ್ನಂಥ ಪ್ರೋಗ್ರಾಂನಿಂದ ಭಿನ್ನವಾಗಿದೆ, ಡಾಕ್ಯುಮೆಂಟ್ ರಚನೆಕಾರರು ಪದಗಳ ಮತ್ತು ಆ ಡಾಕ್ಯುಮೆಂಟ್ನ ಇತರ ಅಂಶಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಅನೇಕ ಸ್ಥಳಗಳನ್ನು ಸೇರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಇದು ವೆಬ್ಸೈಟ್ ಡಿಸೈನ್ ಸ್ಪೇಸಿಂಗ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಅಲ್ಲ.

ಆದ್ದರಿಂದ, ನೀವು ವೆಬ್ ಪುಟದಲ್ಲಿ ತೋರಿಸುವ HTML ನಲ್ಲಿ ವೈಟ್ಸ್ಪೇಸ್ಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುತ್ತೀರಿ? ಈ ಲೇಖನವು ಕೆಲವು ವಿಭಿನ್ನ ವಿಧಾನಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಸ್ಪೇಸಸ್

ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ (CSS) ನೊಂದಿಗೆ ನಿಮ್ಮ HTML ನಲ್ಲಿನ ಸ್ಥಳಗಳನ್ನು ಸೇರಿಸಲು ಆದ್ಯತೆಯ ವಿಧಾನವಾಗಿದೆ. ವೆಬ್ ಪುಟದ ಯಾವುದೇ ದೃಶ್ಯ ಅಂಶಗಳನ್ನು ಸೇರಿಸಲು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಬಳಸಬೇಕು, ಮತ್ತು ಅಂತರವು ಪುಟದ ದೃಶ್ಯ ವಿನ್ಯಾಸ ಗುಣಲಕ್ಷಣಗಳ ಭಾಗವಾಗಿರುವುದರಿಂದ, ಇದನ್ನು ನೀವು ಎಲ್ಲಿ ಮಾಡಬೇಕೆಂದು ಸಿಎಸ್ಎಸ್ ಬಯಸುತ್ತದೆ.

CSS ನಲ್ಲಿ, ಅಂಶಗಳ ಸುತ್ತ ಜಾಗವನ್ನು ಸೇರಿಸಲು ಅಂಚು ಅಥವಾ ಪ್ಯಾಡಿಂಗ್ ಗುಣಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪಠ್ಯ-ಇಂಡೆಂಟ್ ಆಸ್ತಿ ಪಠ್ಯವನ್ನು ಮುಂಭಾಗಕ್ಕೆ ಸೇರಿಸುತ್ತದೆ, ಅಂದರೆ ಪ್ಯಾರಾಗಳನ್ನು ಇಂಡೆಂಟ್ ಮಾಡುವುದು.

ನಿಮ್ಮ ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳ ಮುಂದೆ ಜಾಗವನ್ನು ಸೇರಿಸಲು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ನಿಮ್ಮ ಬಾಹ್ಯ ಅಥವಾ ಆಂತರಿಕ ಸ್ಟೈಲ್ ಶೀಟ್ಗೆ ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ಸೇರಿಸಿ:

p {
ಪಠ್ಯ ಇಂಡೆಂಟ್: 3 ಎಮ್;
}

ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿನ ಅಂತರಗಳು: ನಿಮ್ಮ ಪಠ್ಯದ ಒಳಗೆ

ನಿಮ್ಮ ಪಠ್ಯಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಸ್ಥಳವನ್ನು ಅಥವಾ ಎರಡು ಸೇರಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ಮುರಿಯದ ಸ್ಥಳವನ್ನು ಬಳಸಬಹುದು.

ಈ ಪಾತ್ರವು ಪ್ರಮಾಣಿತ ಬಾಹ್ಯಾಕಾಶ ಪಾತ್ರದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಕೇವಲ ಬ್ರೌಸರ್ನಲ್ಲಿ ಅದು ಕುಸಿಯುವುದಿಲ್ಲ.

ಪಠ್ಯದ ಸಾಲಿನೊಳಗೆ ಐದು ಸ್ಥಳಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು ಎಂಬುದರ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

ಈ ಪಠ್ಯವು ಐದು ಹೆಚ್ಚುವರಿ ಸ್ಥಳಗಳನ್ನು ಹೊಂದಿದೆ

HTML ಅನ್ನು ಬಳಸುತ್ತದೆ:

ಈ ಪಠ್ಯವು & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ಒಳಗೆ ಐದು ಹೆಚ್ಚುವರಿ ಸ್ಥಳಗಳು

ಹೆಚ್ಚುವರಿ ಲೈನ್ ಬ್ರೇಕ್ಗಳನ್ನು ಸೇರಿಸಲು ನೀವು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಬಹುದು.

ಈ ವಾಕ್ಯವು ಅದರ ಕೊನೆಯಲ್ಲಿ ಐದು ಸಾಲು ವಿರಾಮಗಳನ್ನು ಹೊಂದಿದೆ

ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಸ್ಪೇಸಿಂಗ್ ಕೆಟ್ಟ ಐಡಿಯಾ ಏಕೆ

ಈ ಆಯ್ಕೆಗಳು ಎರಡೂ ಕೆಲಸ ಮಾಡುವಾಗ - ಅಲ್ಲದ ಬ್ರೇಕಿಂಗ್ ಜಾಗಗಳು ಅಂಶವು ನಿಮ್ಮ ಪಠ್ಯಕ್ಕೆ ಸ್ಪೇಸಿಂಗ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಲೈನ್ ಬ್ರೇಕ್ಗಳು ​​ಮೇಲೆ ತೋರಿಸಿರುವ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಕೆಳಗೆ ಅಂತರವನ್ನು ಸೇರಿಸುತ್ತದೆ - ನಿಮ್ಮ ವೆಬ್ಪುಟದಲ್ಲಿ ಅಂತರವನ್ನು ರಚಿಸುವ ಉತ್ತಮ ಮಾರ್ಗವಲ್ಲ. ನಿಮ್ಮ ಎಚ್ಟಿಎಮ್ಎಲ್ಗೆ ಈ ಅಂಶಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು (ಸಿಎಸ್ಎಸ್) ಒಂದು ಪುಟ (ಎಚ್ಟಿಎಮ್ಎಲ್) ರಚನೆಯನ್ನು ಬೇರ್ಪಡಿಸುವ ಬದಲು ಕೋಡ್ಗೆ ದೃಶ್ಯ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸುತ್ತದೆ. ಭವಿಷ್ಯದ ಮತ್ತು ಒಟ್ಟಾರೆ ಫೈಲ್ ಗಾತ್ರ ಮತ್ತು ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನವೀಕರಿಸುವ ಸುಲಭ ಸೇರಿದಂತೆ ಹಲವಾರು ಕಾರಣಗಳಿಗಾಗಿ ಇದು ಪ್ರತ್ಯೇಕವಾಗಿರಬೇಕು ಎಂದು ಅತ್ಯುತ್ತಮ ಆಚರಣೆಗಳು ಸೂಚಿಸುತ್ತವೆ.

ನಿಮ್ಮ ಎಲ್ಲಾ ಶೈಲಿಗಳು ಮತ್ತು ಅಂತರವನ್ನು ಹೇಳುವುದಕ್ಕೆ ಬಾಹ್ಯ ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ನೀವು ಬಳಸಿದರೆ, ಸಂಪೂರ್ಣ ಸೈಟ್ಗಾಗಿ ಆ ಶೈಲಿಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಸುಲಭವಾಗಿದೆ, ಏಕೆಂದರೆ ನೀವು ಕೇವಲ ಒಂದು ಸ್ಟೈಲ್ ಹಾಳೆಯನ್ನು ನವೀಕರಿಸಬೇಕು.

ಅದರ ಕೊನೆಯಲ್ಲಿ ಐದು
ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ವಾಕ್ಯದ ಮೇಲಿನ ಉದಾಹರಣೆಯನ್ನು ಪರಿಗಣಿಸಿ. ಪ್ರತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಕೆಳಭಾಗದಲ್ಲಿ ಆ ಅಂತರವನ್ನು ನೀವು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಸೈಟ್ನಲ್ಲಿ ಪ್ರತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಆ HTML ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಪುಟಗಳನ್ನು ಉಬ್ಬಿಕೊಳ್ಳುವ ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ನ ನ್ಯಾಯೋಚಿತ ಪ್ರಮಾಣವಾಗಿದೆ.

ಹೆಚ್ಚುವರಿಯಾಗಿ, ಈ ಅಂತರವು ತುಂಬಾ ಕಡಿಮೆ ಅಥವಾ ತುಂಬಾ ಕಡಿಮೆ ಇರುವ ರಸ್ತೆಯನ್ನು ನೀವು ನಿರ್ಧರಿಸಿದರೆ, ಮತ್ತು ನೀವು ಅದನ್ನು ಸ್ವಲ್ಪ ಬದಲಿಸಬೇಕೆಂದು ಬಯಸಿದರೆ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ನೀವು ಸಂಪಾದಿಸಬೇಕಾಗಿದೆ. ಧನ್ಯವಾದಗಳು!

ಈ ಸ್ಪೇಸಿಂಗ್ ಅಂಶಗಳನ್ನು ನಿಮ್ಮ ಕೋಡ್ಗೆ ಸೇರಿಸುವ ಬದಲು, ಸಿಎಸ್ಎಸ್ ಬಳಸಿ.

p {
ಪ್ಯಾಡಿಂಗ್-ಬಾಟಮ್: 20 px;
}

ಒಂದು ಪುಟದ ಸಿಎಸ್ಎಸ್ ನಿಮ್ಮ ಪುಟದ ಪ್ಯಾರಾಗಳ ಅಡಿಯಲ್ಲಿ ಅಂತರವನ್ನು ಸೇರಿಸುತ್ತದೆ. ಭವಿಷ್ಯದಲ್ಲಿ ಆ ಅಂತರವನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸಿದರೆ, ಈ ಒಂದು ಸಾಲನ್ನು ಸಂಪಾದಿಸಿ (ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಸೈಟ್ನ ಕೋಡ್ ಬದಲಿಗೆ) ಮತ್ತು ನೀವು ಹೋಗುವುದು ಒಳ್ಳೆಯದು!

ಈಗ, ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ನ ಒಂದು ಭಾಗದಲ್ಲಿ ಒಂದು ಜಾಗವನ್ನು ಸೇರಿಸಲು ನೀವು ಬಯಸಿದಲ್ಲಿ,
ಟ್ಯಾಗ್ ಅಥವಾ ಒಂದು ಒಡೆಯುವ ಸ್ಥಳವನ್ನು ಬಳಸಿ ವಿಶ್ವದ ಅಂತ್ಯವಲ್ಲ, ಆದರೆ ನೀವು ಜಾಗರೂಕರಾಗಿರಬೇಕು.

ಈ ಇನ್ಲೈನ್ ​​ಎಚ್ಟಿಎಮ್ಎಲ್ ಅಂತರ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಲಿಪರಿ ಇಳಿಜಾರಾಗಿರಬಹುದು. ನಿಮ್ಮ ಸೈಟ್ಗೆ ಒಂದು ಅಥವಾ ಎರಡು ಮಂದಿ ಹಾನಿಯಾಗದಿದ್ದರೂ, ಆ ಮಾರ್ಗವನ್ನು ನೀವು ಮುಂದುವರಿಸಿದರೆ, ನಿಮ್ಮ ಸಮಸ್ಯೆಗಳಿಗೆ ನೀವು ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಚಯಿಸಬಹುದು. ಕೊನೆಯಲ್ಲಿ, ಎಚ್ಟಿಎಮ್ಎಲ್ ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ಇತರ ಎಲ್ಲ ವೆಬ್ಪುಟದ ದೃಶ್ಯ ಅಗತ್ಯತೆಗಳಿಗೆ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ತಿರುಗಿಸುವುದು ಉತ್ತಮವಾಗಿದೆ.