Как немного сдвинуть текстовую область вправо и закрыть вертикальный зазор между текстовой областью и заголовком в этом элементе html:

<crowd-form answer-format="flatten-objects">


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<div>
      <h4>Write an essay</h4>
      <crowd-text-area name="essay"rows="2" placeholder="Write here ...."></crowd-text-area>
    </div>
    
    
</crowd-form>

До сих пор я пытался локально управлять полями указанного выше элемента следующим образом:

style= "margin-left:50px"

Однако, хотя это перемещает текстовое поле по горизонтали, по вертикали это не уменьшает разрыв между заголовком и текстовой областью. Что-то вроде этого:

enter image description here

Как уменьшить разрыв и одновременно локально переместить текстовую область вправо, чтобы не повредить другие стили, которые есть в моем документе?

Я также пытался:

div style='margin-left:150px;margin-top: 1px;'>

Однако я не могу контролировать вертикальное поле

1
aywoki 24 Фев 2021 в 23:43

2 ответа

Лучший ответ

Удалите поле на элементе заголовка:

h4 {margin-bottom: 0;}

Затем поместите отступ на содержащий элемент:

.pad-left {padding-left: 50px;}
<style>
    h4 {margin-bottom: 0;}
    .pad-left {padding-left: 50px;}
</style>

<crowd-form answer-format="flatten-objects">
    <script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
    
    <div>
        <h4>Write an essay</h4>
    
        <div class="pad-left">
           <crowd-text-area name="essay"rows="2" placeholder="Write here ...."></crowd-text-area>
        </div>
    </div>
</crowd-form>
1
isherwood 24 Фев 2021 в 21:09

В теге H4 он имеет нижнее поле уже на 21 пиксель, поэтому вы можете установить его на 0, чтобы приблизить их.

<h4 style="margin-bottom: 0px;">Write an essay</h4>

Вы можете добавить отступ к текстовому полю div, чтобы переместить его вправо.

<div class="textarea-container fit" style="padding-left: 10px;">
      <textarea id="textarea" rows="2" autocomplete="off" placeholder="Write here ...." aria-labelledby="paper-input-label-1"></textarea>
</div>
1
Bennviddesign 24 Фев 2021 в 21:13