HamSter

margin на placeholder никак не влияет, потому что задает внешние отступы!

Регулировать стили для подсказки можно задав стили для input(font-size, line-height, padding) или стилизация placeholder:

::-webkit-input-placeholder {
...
}
:-moz-placeholder { 
...  
}
::-moz-placeholder { 
...
}
:-ms-input-placeholder { 
...
}

Такой вариант с flex и смещением на пару пикселей:

Ищите "css timeline"

Например: урок на w3schools

Хотя есть примеры реализации и с помощью js.

Например с помощью svg:

html:

<div class="box">
  <svg><line x1="0" y1="100%" x2="100%" y2="0" stroke-width="1" stroke="#fff"></line></svg>
</div>

css:

.box {
  width: 100%;
  height: 500px;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
}

JSBIN

Пример: codepen

Рисую без сетки, все хорошо в плане дизайна, но не хорошо для верстальщика, который ворчит. Рисую с сеткой, получается какой то не уклюжий дизайн (не всегда безусловно, зависит от идеи), но верстальщик доволен.

Я сомневаюсь в Вашей компетентности, в Ваших дизайнерских способностях, если Вы задаете подобные вопросы.
Каждый дизайнер знает что модульная сетка может быть разной.
Креативный дизайнер не ограничивается сеткой bootstrap, но это обязательно какая-то сетка со своими вертикальными и горизонтальными ритмами.
Если соблюдены ритмы, размеры текста и шрифтов, то для верстальщика нет проблем.

Начните хотя бы со статей о сетках, например Что такое модульная сетка и для чего она нужна в в... , Модульная сетка макета с нуля

--------------------------------------------------------------------

Могу ли я рисовать без сетки, но при этом на этапе верстки, все это дело можно было бы подогнать под бутстрап?

Ответ: нет! Максимум изменить количество колонок, подогнать gutter'ы, но это уже заморочки для верстальщика.

НО, плох тот верстальщик, который зациклен на одном лишь bootstrap.
Хороший верстальщик, этот тот который в основном верстает кастомно - без использования подобных html фреймворков.
В таком случае любой дизайн можно сверстать без проблем.

И, возможно, что вам с верстальщиком стоит расстаться, чтобы не мучить друг друга! Либо научитесь идти на компромиссы и прислушиваться друг к другу!

И стоит ознакомиться хотя бы с основами верстки, а то с вот таким мнением:

верстальщик должен подстраиваться под тебя, а не ты под него. ты-творец, твори))

можете остаться наедине со своими "творениями"!

Например: codepen

1. Такой костыльный вариант jsBin

2. Пример с svg

<svg xmlns="http://www.w3.org/2000/svg" viewPort="0 0 500 500" width="100%" height="100%">
    <defs>
      <filter id="f1" x="-50%" y="-50%" height="200%" width="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>

    <g filter="url(#f1)">
      <rect width="200" height="200" x="50%" y="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
      <circle r="100" cx="50%" cy="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
    </g>
</svg>

Не все почтовые клиенты поддерживают media queries и style.
Таблица поддержки: campaignmonitor

Если Вы используете bootstrap 4, то в разметке уже предусмотрены нулевые отступы, для этого вместе с классом .row используют класс .no-gutters

Пример:

<div class="row no-gutters">
  <div class="col-12 col-md-8">.col-12  .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Можно без js обойтись, animate:

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <circle fill="none" stroke="#000" stroke-width="3" cx="150" cy="150" r="100" />
      <circle cx="150" cy="150" r="10" stroke="red"></circle>
      <g class="orbit">
        <circle cx="80" cy="80" r="20"></circle>
      </g>
    </svg>
  </div>

Анимация:

.box {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg .orbit {
  animation: spin-right 10s 30 linear;
  transform-origin: 150px 150px 0;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

пример codepen