イメージにパディングを追加できません

Dreamweaver CC 2015のソーシャルメディアアイコンにパディングを追加できません。コードでの経験はほとんどありませんが、今夜までに学校で課題を完了する必要があります。基本的には、視覚的に魅力的に見えるようにアイコン間にスペースが必要です（20pxは理想的です）。私が抱えている問題は、CSSのパディングや余白を分割ビューで変更すると、ライブビューに切り替えると、スペースは0pxに戻り、プレビューすると同じになります。イメージにパディングを追加できません

コード：

.social-icon { 
 
    margin-right: 100px; 
 
    margin-left: 100px; 
 
    margin-top: 0px; 
 
    padding-right: 100px; 
 
}

<footer> 
 
    <center> 
 
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;"> 
 
     <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a> 
 
     <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a> 
 
    </h4> 
 
    </center> 
 
</footer>

出典

2016-03-30 Mack

あなたの画像は私の行ではありません。各画像の下部にスペースが必要ですか？ –

ようこそスタックオーバーフロー！コードヘルプを求める質問には、質問自体に** ** [** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable）で**それを再現するのに必要な最短コードを含める必要があります** -javascript-css-and-html-code-snippets /）。 [**最小限で完全で検証可能なサンプルの作成方法**]（http://stackoverflow.com/help/mcve） –

これが学校プロジェクトの場合、私は理解しています。しかし、そうでない場合、Dreampointを使用してウェブサイトを構築するために銃砲を余儀なくされていない場合は、自分で好きなだけ止めてください！ O_O基本を学ぶと、あなたは他人を助けてくれるでしょう:) –

あなたが画像要素にパディングを追加することはできません。それを親に追加することはできますが、マージンのために何も起こりません。ちょうどmargin-right:200px;を作ってみませんか？

出典

2016-03-30 12:53:20 sourRaspberri

あなたとPimskieの両方が画像のパディングに関して間違っていますが、それは要素とその境界線の間のスペースを表すので完全に正常です。 – pegla

-1

質問が分かりましたかどうか分かりませんが、すぐに問題が解決する可能性があります。あなたがそれらを揃えることにしたい

.social-icon { 
    margin-top: 0px; 
    padding: 20px; 
}

または

.social-icon { 
    margin-top: 0px; 
    margin-right: 20px; 
    margin-left: 20px; 
}

出典

2016-03-30 12:54:40 pegla

.social-icon { 
 
margin-right: 10px; 
 
margin-left: 10px; 
 

 
}

<footer> 
 
    <center> 
 
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;"> 
 
     <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a> 
 
     <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a> 
 
    </h4> 
 
    </center> 
 
</footer>

??：

あなたがするようにコードを変更してみてください

か、imgタグは任意の子要素を持つことができないので、それはどちらかのパディングを持つことができないフレキシボックス

.footer{ 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap:wrap; 
 
} 
 

 
.social-icon { 
 
margin: 10px; 
 

 
}

<footer> 
 
    <center> 
 
    <h4 class="footer" style="background-color: grey; width: 100%; padding-top: 100px; padding-bottom: 150px; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;"> 
 
     <a href="http://facebook.com"><img src="../Flikk/images/facebook.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://pinterest.com"><img src="../Flikk/images/pinterest.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://twitter.com"><img src="../Flikk/images/twitter.png" width="70px" height="70px" class="social-icon"></a> 
 
     <a href="http://googleplus.com"><img src="../Flikk/images/gplus.png" width= "70px" height= "70px" class="social-icon"></a> 
 
     <a href="http://youtube.com"><img src="../Flikk/images/youtube.png" width= "70px" height= "70px" class="social-icon"></a> 
 
    </h4> 
 
    </center> 
 
</footer>

出典

2016-03-30 12:54:56 DanyCode

でそれを行うことができます。しかし、単に画像にmargin: 10px;を追加することはできませんか？

https://jsfiddle.net/Lg9e6Lth/4/

出典

2016-03-30 12:55:30 Pimmol

-1の場合は申し訳ありませんが、パディングは要素と罫線の間のスペースなので、画像と罫線を持つことができる要素はすべてパディングできます。だから、他の回答に投票する前にhttp://www.w3schools.com/css/css_padding.aspをチェックしてください。 – pegla

もしw3sがそれを言うならば！ – Pimmol