Problems while controling the margin of an HTML text area?

How to slightly move to the right the text area, and close the vertical gap between the text area and the title in this html element:

<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>

So far I tried to locally control the margins of the above element like this:

style= "margin-left:50px"

However, although this is moving the textbox horizontally, vertically it is not reducing the gap between the title and te text area. Something like this:

How can I reduce the gap and move the textarea to the right at the same time locally, to avoid wrecking other styling that I have in my document?

I also tried to:

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

However, I am unable to control the vertical margin

Answer

Remove the margin on the heading element:

h4 {margin-bottom: 0;}

Then, put some padding on a containing element:

.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>

Advertisement

Answer