1 Востаннє редагувалося Monolith (20.11.2016 23:48:19)

Тема: Як правильно використовувати властивість line-height?

Зараз заради досвіду почав верстати простий(для мене не простий) шаблон .psd. Маю проблему в тому, що не можу зробити правильні відступи як на макеті. Якщо для відповіді треба буде скинути шаблон/мій код пишіть, просто думаю, що це питання не прикріплене саме до моєї ситуації...

Ось наприклад:
Макет:
https://lh3.googleusercontent.com/g5eKJKg3ZnA1bf-dXmIVp5IqMD4y3FQ9AcII4O-zvCEcMGS8Tc8NfQOCwv7ugBpH1L3S35sIpmN2KZb7jNFe-z1B6-gn0qa4k9C0mz9nyWOAxrPWpVDKUR1Td9MuqqKnk7L-WWjfm1h38tEOeamdihIDt8kBsHd3RDHxts7HVbllHbZuduaPSRCWGHi4mZAgmiEsj3LELjWZiLdZSYnabnljPehy5HKdAlnfF-e9_uMN3LVE7rGTRxk6DhEDjtWoySyzWpWyN_wj-vv6OnhIUhdkix2Vf42TGkGKyZz_QvrvC7XvxbRfWEqGZ5yuwY1TSkt1wEoEpinNwDoV6ODenaiakWiZTiF2cBl_1rI7a9Dl6JXttdCGse9T4zx_Smb0YysBgQo9JPNbT_loxtRz4loTyZDjQUmOmoV9DBbsILcTyhHM9xS6QdkobXuKDPPz2U2JrR9iMnEggJE9S2yU6msClpYCXXVhK-13vw-sTVnB5Ip1lw4NyF5tsdBeoapC8QEjKvo5Mf9wZGIYVOHPQu7iEGaYOgLfLOhQ4GyvLcyLffX133e4nciDSf-4YyLQ9HlIUC1j_U3FMjwumcIGDgNJ3tsfBm-RDfJvhy5W_KqUX3Y=w775-h305-no

Моя робота:
https://lh3.googleusercontent.com/JGOIMPyP3SzL6sqCCSg8vuy9zGmWQaQTkZ61uBQ9ybVjUY1LjkLAfU3gGxAnkpXI40auHWBXjLhnE6TkdBUjkGFgwS-MShtL5t2s5slVZwH5s4s2DCNBTYWU8-7H-xIz67VI2UjOodSXcin4BM7oZJBtc3u8UvIULLMel2zU0KPR6hBu4IzxLWb8cmmHWjmwc-QsSjBrlLuHtB2lJvOcLA3vl2a_btk4ssbhfSGUwHyz9LCf7ms2ykknH6UOwUr-ZFkkeaUECQn9N8mzz4zl-UNnMWk54UdcYSdwhOpOtW6mWPYIlCXadkKOPgg3nAiwjTk9KI-E02spKGnny98_M6VaScNEB1buQNebhKAheH-xhcEvvPr-xXXkm1BSGLL3QmHfogeVg1nDR18YdJ_7XhO8u3jKJzIxmZMZnepUJLxpy3RpDysyYZQTvKRpfNfqNmnFSxU84CbeJ44tvnLwXUMCICmLqnEJTTqDR_3rVdKXbiGX1WwTpU4HxuOpIxxaOmu_-xPZufkSC6SZYAiSeys7-z88QmvFcxdsrbaVgvsfPL_5nOV8GxsiZjyRxqvIG0Cllxyp8dyNfygAjfjwmgeDGk74NQMTgeSOhlfwkBTzvg4=w823-h339-no

Ще не доробив елемент макету, але вже видно проблему. У центрального блоку нижній внутрішній відступ завеликий. Через це й іконки трохи нижче знаходяться. Відступи всі задаю як на шаблоні: міряю лінійкою. Пошукав в Інтернеті через, що таке може бути. Знайшов таку css-властивість як line-height. Але як саме правильно її задавати так і не зрозумів. Знайшов її в Фотошопі(якщо правильно зрозумів):
https://lh3.googleusercontent.com/brNVyAot80WEkPlWa-eF8AMeRQhT3Vm4gQe5ooUSD1jZKU7082I1f1US6cuZvGivxcM2PVou6GUa8cJ5-t1Lz0zZ6CNAYoEkt8pqKzPqUpDLxJuERv4_J8ib0QwCoZcRfR1hDdpqFG1Urop_yZlnaHp2jT8TwLKAC3DRtlpx-_rPNwIq15TsJT24ppMI8Nz7aQQBQDLsLeEXE-8VLuwKhq72qEd1UJJpG-G-6cderQbV4eUkPVqtnXFubNqn3eQe5u0ktB25C_BnT8qu7WyBu3MYjLi7dQaga5jMefT3lkdNKufCRADRURPtYoZ6eAPcZmHs9kdGNvofu-YnN0WG_m9SlwcPtlfggvt1p1CJWI2jlOA5ZJ6cZ975lIyTSV9dfOK79-xmxoUmRP97TlCouCpdoxt3N7eL4ZeU5lNkY-hXezpQMJQAfkj2xa86maTNV-GK55rO7AtDbBF39J5QrRMIOZkd87M1dw8NFcSls6rKWV71LuHazMRE3EEBk5xg1fS4s-qiIjUJIxR3QH9kmposeVrEnF7j-va8wniNzgZoqUOTtRO_M7NMLsVA7E9F8Cz6D2SATC9US_3RaGJx9CoRMlmZL3SJtZEMb5nba00KuZ8=w222-h256-no

Якщо таку властивість, з таким значенням дописати до блоку, то все вирівнюється. Але виходить, що тоді треба так до кожного елементу писати свій line-height? Так як у кожного елемента він свій. В Інтернеті коли дивився відео як верстати сайти, то автор часто просто прописував таку властивість селектору body і не більше. Тому як мені поступити? Просто "гратися" з відступами чи при необхідності кожному елементу прописувати свій line-height?

P.S Вибачаюсь відразу, якщо написав каламбурно, бо вже цілий день пишу CSS і голова трохи не варить... %)

U.P.D Спробував бездумно додавати line-height - взагалі каша виходить...

Подякували: 221VOLT1

2

Re: Як правильно використовувати властивість line-height?

Рисунків немає :(
line-height визначає висоту лінії тексту. Просто зробіть  простий боковий елемент тексту з цим атрибутом і побавтеся значеннями.
https://developer.mozilla.org/en-US/doc … ine-height

Подякували: 221VOLT, Monolith2

3

Re: Як правильно використовувати властивість line-height?

можна ще висоту кнопок задавати