Всё верно "даже смысла нет изучать из-за переполнения рынка". Я полтора года просидел на фрилансе, никому не советую. Работа над хотелками заказчика может растянутся на месяц, заказчик может кинуть (и такое было, да). Есть вероятность найти адекватного менеджера (у которого целая ферма из такой вот дешёвой рабочей скотины), они ещё могут скидывать более менее регулярные заказы, но оплата будет небольшой. В офисах примерно тоже самое (если взять какой-нить город милионник, то 100 веб-студий где верстаки верстают за копейки и 5-10 топовых, где платят нормально но верстаки там сидят ровно и нет никакой текучки), но там хоть шансы получить свои гроши - повыше. Сейчас мне стыдно, что я несколько лет посвятил себя этой работе. Опозорился со своим выбором конкретно. Хотя сейчас верстаю вполне себе на уровне

6-угольную svg-шку бэкграундом вставить в прямоугольный блок - самое логичное решение

я верстаю несколько лет. Знаю свою работу на все 80 для того чтобы верстать достаточно сложные проекты. Но меня если честно заколебало с пикселями-отступами возится, кастомизировать селекты и прочие элементы форм. Честно признаюсь я так и не научился оценивать время для верстки того или иного блока. Кроме того периодически сталкиваюсь с ситуациями когда задумываешься - а как это лучше сверстать? Это тяжёлая и неблагодарная работа. Верстаков сейчас как нерезанных собак - соответственно зарплаты маленькие (во всех городах кроме дс). Все хотят перфект-пиксельного адаптива, кроссбраузерности, семантичной разметки, валидности и много чего ещё... При этом унижают нашего брата все кому не лень - от дизайнеров (а почему здесь разница в 2 пикселя?) до программистов (а почему этот блок нельзя было иначе сделать?). У всех свои взгляды на идеальную вёрстку и угодить всем просто нереально. Не рекомендую связываться, лучше сразу идите в бэкенд. Ничего хорошего. Даже не пытайтесь полюбить это чёрное дело.

потому что картинка по умолчанию строчный (инлайновый) элемент. Все инлайновые элементы воспринимаются как строки текста, а так как у текста (у отдельных символов, например символ "y" имеет снизу "хвостик" ) то браузер специально добавляет отступы снизу-сверху, чтобы символы полностью поместились в строку по высоте. Поэтому, что бы картинка воспринималась не как строчный, а как блочный элемент надо задавать для неё правило display: block

jsfiddle.net/p2btx682