ボタンの上にオーバーラップするイメージをアップロードするためのスパン要素

Question

記事を書くためのフォームを作成しました。
フォームは、タイトルのtext_field、コンテンツのtext_area、フォームを送信するためのボタン、画像をアップロードするfile_fieldで構成されます。あなたは、私が選んだスタイルから見ることができるように、

<%= form_for(@atp_article, html: { multipart: true }) do |f| %> 
    <%= render 'shared/error_messages', object: f.object %> 
    <div class="article_field"> 
     <%= f.text_field :title, placeholder: "Write the article's title..." %> 
    <%= f.text_area :content, placeholder: "Compose new article..." %> 
    </div> 
    <%= f.submit "Post", class: "btn btn-primary" %> 
    <span class="picture"> <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %> </span> 
<% end %> 

file_fieldは、上記の要素から10pxのマージンを持つようになっている： belowsのコードです

span.picture { 
    margin-top: 10px; 
    input { 
    border: 0; 
    } 
} 

しかしクラスとspan要素.pictureは上記のボタンと重なり、スタイルも無視しています。imgboxでアップロードしたimageからわかります。

フォームを含む全体のコードは次のとおり

<div class="atp_articles_form"> 
    <strong> Write below any useful ATP piece of news </strong> 
    <section class="atp_article_form"> 
     <%= render 'shared/atp_article_form' %> 
    </section> 
</div> 

.atp_articles_formクラスは30px上部および下部パディングを有しています。他のスタイルはありません。
私のアプリケーションの別のセクションでは上記のスタイルが使用されています。クラス.pictureのspanエレメントは、ボタンから10px下にあるその場所にとどまるように、付属のinputエレメントとして29pxの高さになります。代わりに、この場合、クラス.pictureのspan要素は75pxの高さを持ち、付属のinput要素は29pxです。私はなぜなのか理解していない。

Answer 1

spanは、an inline elementである。私はあなたがそれはあなたがそれを与えた、例えば10pxのマージンを称える（ブロックレベル要素のように動作したいあなたの説明から、感覚を得るその場合は、あなたのCSSコードにdisplay: block;を追加する必要があり、例えば：。

span.picture { 
    display: block; // this makes it a block-level element 
    margin-top: 10px; 
    input { 
    border: 0; 
    } 
}