イメージディスプレイ|バナーdiv＆スタイリング

Question

非常にシンプルなクライアントバナーを作成しました.1行に6つのイメージとオレンジの背景があります。私は、各画像の間に自動的に作成されるパッディングの倍増量を取り除くための最良の選択肢が何であるか分かりません。現在のバナーを表示できる場所は次のとおりです。http://dalaigroup.com/maryland-seo/

私が念頭に置いておくべきことは、画像が携帯端末向けにどのように再配信されるかです。余分な余白と余白スペースはここではるかに目立つようになります。ゼロまたは負のマージンスペースを作成することは、私の好みでは機能しません。なぜなら、モバイル向けの画像再フォーマットの仕方だからです。

2つのイメージごとにコンテナを作成したり、レスポンシブテーブルで作業したり、モバイル版の別のコードを書く必要があるかどうかはわかりません。このようなクライアントバナー用に別のコードを書く必要がありますか？マージンとパディングをより詳細に制御できるように、これをどのように書くことができますか？これらの要素に特定のサイズを設定しようとすると、ロゴのサイズが簡単に損なわれます。

あなたが持っているヒントは本当に役に立ちます。あなたの時間をありがとう。

Answer 1

画像を保持する各divの上に空の<p>タグがあります。これにより、各画像の上部に余分なスペースが生じます。下の私の編集で見られるようにそれらを削除すると、スペースを均等にする必要があります。画像上の

他のいくつかの提言：

• は、ブートストラップの画像に正確な幅を設定するように注意してください小さな画面上で見たとき、それは間隔の問題を引き起こす可能性があります。それがないので、垂直方向のマージンが不足している以下のスニペットで<img class="img-responsive center-block" src="foo" />
• ：
• ブートストラップを使用すると、比例して、ユーザーの画面サイズに応じてそれらを中心に維持し、そのサイズを拡大します画像に追加することができ、これらの2つのクラスを持っていますあなたのスタイルシートからのWordPress CSSを引っ張っ

編集：あなたは

.aligncenter { 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row" style="background: #fe8101;"> 
 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16855" title="McCormick" src="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png" alt="McCormick-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png 250w, http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square-150x150.png 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16272" title="Adidas" src="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg" alt="Adidas-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16271" title="Abercrombie &amp; Fitch" src="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg" alt="Abercrombie-and-Fitch-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16274" title="Citibank" src="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg" alt="Citibank-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16288" title="Sheraton Hotels" src="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg" alt="Sheraton-Hotels-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 

 
\t <div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16278" title="Gap" src="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg" alt="Gap-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div> 
 
</div>

を提供されたURLからマージンの定義を持つクラスを追加しました