Spacing two Ivs with bootstrap

Question

I’m two Ids that are glued together and I wanted to give them a vertical survey, but I’m not doing it right. I’m wearing the bootstrap

space between the file button and the save button in case

<div >
   <div >
      <span>
      Arquivo Referente a Requisição
      <input class="btn btn-file" data-icon="false" type:"file"   />
      </span>
   </div>
   <div>
      <button>Salvar</button>
   </div>
</div>

Answer 1

You have several ways to do this. In your case you can use a margin.:

The CSS margin property defines the margin area on all four sides element. Abbreviation defining all individual margins all at once: margin-top, margin-right, margin-bottom, and margin-left.

So for your case just put a margin-bottom in div of input and set the distance. See:

.upload-file {
  background-color: #F1F1F1;
  margin-bottom: 1.2rem;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div>
   <div class="upload-file">
      <span>
      Arquivo Referente a Requisição
      <input type = "file"/>
      </span>
   </div>
   <div>
      <button>Salvar</button>
   </div>
</div>

Note: In your input type file you have a small error, you are using HTML one type: 'file', the correct would be: type = 'file', com um=``.

References

• margin MDN

• padding MDN