Comment déplacer légèrement vers la droite la zone de texte et fermer l'espace vertical entre la zone de texte et le titre dans cet élément 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>

Jusqu'à présent, j'ai essayé de contrôler localement les marges de l'élément ci-dessus comme ceci:

style= "margin-left:50px"

Cependant, bien que cela déplace la zone de texte horizontalement, verticalement, cela ne réduit pas l'écart entre le titre et la zone de texte. Quelque chose comme ça:

enter image description here

Comment puis-je réduire l'écart et déplacer la zone de texte vers la droite en même temps localement, pour éviter de détruire d'autres styles que j'ai dans mon document?

J'ai aussi essayé de:

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

Cependant, je ne peux pas contrôler la marge verticale

1
aywoki 24 févr. 2021 à 23:43

2 réponses

Meilleure réponse

Supprimez la marge sur l'élément d'en-tête:

h4 {margin-bottom: 0;}

Ensuite, mettez un peu de remplissage sur un élément conteneur:

.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 févr. 2021 à 21:09

Sur la balise H4, elle a déjà une marge inférieure sur 21px, vous pouvez donc la définir sur 0 pour les rapprocher.

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

Vous pouvez ajouter un remplissage à votre division de zone de texte pour la déplacer davantage vers la droite.

<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 févr. 2021 à 21:13