title: span element for uploading image overlapping above button
body: <p>I created a form for writing articles. <br>
  The form consists of a text_field for title, a text_area for content, a button for submitting the form, and a file_field for uploading images.
  Belows is the code:</p>
  
  <pre><code>&lt;%= form_for(@atp_article, html: { multipart: true }) do |f| %&gt;
    &lt;%= render 'shared/error_messages', object: f.object %&gt;
    &lt;div class="article_field"&gt;
          &lt;%= f.text_field :title, placeholder: "Write the article's title..." %&gt;
      &lt;%= f.text_area :content, placeholder: "Compose new article..." %&gt;
    &lt;/div&gt;
    &lt;%= f.submit "Post", class: "btn btn-primary" %&gt;
    &lt;span class="picture"&gt; &lt;%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %&gt; &lt;/span&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>The <code>file_field</code> is supposed to have a 10px margin from the above element, as you can see from the style I chose:</p>
  
  <pre><code>span.picture {
    margin-top: 10px;
    input {
      border: 0;
    }
  }
  </code></pre>
  
  <p>However the <code>span</code> element with class <code>.picture</code> overlaps the above button, also ignoring style, as you can see from the <a href="http://imgbox.com/nAaIRD1f" rel="nofollow noreferrer">image</a> I uploaded at imgbox.</p>
  
  <p>The entire code containing the form is:</p>
  
  <pre><code>&lt;div class="atp_articles_form"&gt;
      &lt;strong&gt; Write below any useful ATP piece of news &lt;/strong&gt;
      &lt;section class="atp_article_form"&gt;
          &lt;%= render 'shared/atp_article_form' %&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>.atp_articles_form</code> class has 30px top and bottom padding. There is no other style. <br>
  Another section of my application is using the style above, and it works: the span element with class <code>.picture</code> results 29px high as the included <code>input</code> element, as stays on its place at 10px below from the button. Instead, in this case, the span element with class <code>.picture</code> results 75px high, while the included <code>input</code> element is 29px. I do not understand why. </p>