1. ホーム
  2. 質問と答え
  3. 画像上でこのアンカータグのパディングを削除するにはどうすればよいですか？

画像上でこのアンカータグのパディングを削除するにはどうすればよいですか？

2017-10-10 17 views
2

イメージの空白部分でアンカータグを削除するにはどうすればよいですか？今、空白はクリック可能で、私はそれを望んでいません。画像の周りの空白にカーソルを合わせると、私が話していることが分かります。 codepenリンクはhttps://codepen.io/sakirinteser/pen/rGvbmO画像上でこのアンカータグのパディングを削除するにはどうすればよいですか？

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 60%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

どのようにして、画像の周りの空白からタグのパディングを削除することができますか？どんな助けもありがとうございます。

出典

2017-10-10 Sakir Inteser

答えて

3

を変更します。

具体的には、フレックスアイテムを好みの幅に設定し、内側の画像を全幅（width: 100%）にします。これに代えて

：

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    margin: 0 auto; 
    text-align: center; 
} 

.thumbs img{ 
    width: 60%; 
    padding: 0 !important; 
}

これを試してみてください：

.thumbs { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 2%; 
} 

.portfolio a { 
    flex: 0 0 25%; /* new; flex-grow: 0, flex-shink: 0, flex-basis: 25% */ 
    /* margin: 0 auto; */ 
    /* text-align: center; */ 
} 

.thumbs img { 
    width: 100%; /* new */ 
    padding: 0 !important; 
    vertical-align: top; /* optional; to remove descender space; 
          https://stackoverflow.com/q/31444891/3597276 */ 
}
ので、説明もなくdownvoteの

https://codepen.io/anon/pen/pWVmzy

出典

2017-10-10 18:25:12

+0

あなたはどのようなフレックスを説明できますか：0 0 25％;ありますか？または、私にそれに関するドキュメンテーションにリンクしていますか？私は現在モバイル上にあり、あなたの答えはうまくいきます。デスクトップ上でテストすれば、正しい答えとしてマークします。ありがとうございました。 –

+1

これは 'flex-grow'、' flex-shrink'と 'flex-basis'の省略形です。この場合は、*成長しない*、*縮まない*、固定幅を25％に設定しているということです。 –

0

は.portfolio a{ width: 60%}を作り、フレックスアイテムではなく、画像の幅を制御.thumbs img { width: 100%;}

出典

2017-10-10 18:18:57

+0

、私は考えるユーザーが望んでいる：今、あなたは、余白内の任意のクリック可能なスペースを持つべきではありません空白スペースがありません。 –

+0

周囲の空白が残りません。私はそれらの空白を –

+0

に変更したい場合は、 '.portfolio a {flex-basis：30％; } '、私はあなたが働く答えを持っていると思います。 – worc

0

、私は物事のカップル（または頼ま）を説明する必要が

を

<percentage>

パーセント幅を指定します。パーセンテージは、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素の幅に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。注：包含ブロックがブロックコンテナエレメントに基づく絶対配置エレメントの場合、パーセンテージはそのエレメントのパディングボックスの幅に対して計算されます。

これはCSS1からの変更で、幅のパーセンテージは常に親要素のコンテンツボックスに対して計算されます。この場合

  • 、IMGはブロックではなく、身体の直接の子ではない、親の幅がbasicly不明であるので、我々はnullを与え、60％のXヌルを持っているかもしれませんが、本当に

    を適用するためには何もありません
    • しかしここで、我々はフレックス子を持っている...それは親に幅を設定することなく動作しcoudが、画像は、その親の60％であるならば、...親が100％にすることはできませんそれ自身の60％です。うーん、ここで何か間違っているのではないですか？

それほど明確であること、誤算と面白い結果を回避するには、適切に設定して計算される幅を作るためにVWまたは任意の単位が、％を使用することができます...

/* trick to see where elements stand */ 
 

 
* {/* see me */box-shadow:0 0 0 2px red} 
 

 
.portfolio h2{ 
 
\t text-align: center; 
 
\t font-size: 2.5em; 
 
\t color: #27292d; 
 
\t padding-top: 4%; 
 
\t line-height: 1.3; 
 
} 
 

 
.port{ 
 
\t text-align: center; 
 
\t color: #27292d; 
 
\t padding-bottom: 3%; 
 
} 
 

 
.thumbs{ 
 
\t display: flex; 
 
\t margin-bottom: 2%; 
 
    /*padding:0 6.25vw; *//* a quart of img 's width that you can also calculate and set as padding to even the three blank space */ 
 
    justify-content:space-around; 
 
} 
 

 
.thumbs img{ 
 
\t max-width: 25vw; 
 
    vertical-align:top; 
 
} 
 

 
.portfolio a.swipebox{ 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    flex-shrink:1; 
 
}
<div class="portfolio"> 
 
\t \t <section> 
 
\t \t \t <h2>Past Work</h2> 
 
\t \t \t <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 
\t \t \t <div class="thumbs designthumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t \t 
 
\t \t \t </div> 
 

 
\t \t \t <div class="thumbs"> 
 
\t \t \t \t <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
\t \t \t </div> \t \t 
 
\t \t </section> 
 
\t </div>

fork of your pen

出典

2017-10-10 18:28:09

+0

パディング/マージンの問題の割合は、フレックスアイテムにのみ適用され、フレックスコンテナには適用されません。 –

+1

@Michael_B FFは、画像がサイズ変更されたときに画面上に表示されますが、最初に使用されたスペースからではありません.VWユニットは最近気付いたこの面白い振る舞いを避けています。これについて公式に書かれたバグがあるのか​​、他に何か関係があるのか​​どうかは考えられません。掘らなかった –

0

さて、あなたがしようとしていることが分かったと思います。画像は幅：60％に設定されていますが、親指のコンテナの半分のアンカーの内側にあります。だから、あなたの画像はコンテナの半分の60％ですが、アンカーはまだ完全に半分です。

デフォルトでは、アンカーのflexプロパティはflex: 0 1 autoになります。これは、拡大せず、縮小し、このflex要素の幅を自動的に決定するための短い手です。この場合、autoは、包含要素から利用可能なすべての領域を子要素に分配します。

あなたのケースでは、2つのアンカーで、両方のコンテナに残りのスペースが与えられ、それぞれ半分の幅で終了しました。

私はあなたの画像を100％（含まれているアンカーの全幅）に切り替えました。アンカーflexをflex: 0 1 30%に変更しました。したがって、それらの要素を含む幅の30％になります。

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    border: 2px solid black; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
    width: 500px; 
 
} 
 

 
/*.portfolio a*/ 
 
.thumbs a { 
 
    border: 2px dotted red; 
 
    flex: 0 1 30%; 
 
    /*margin: 0 auto;*/ 
 
    text-align: center; 
 
} 
 

 
.thumbs img { 
 
    border: 2px solid black; 
 
    width: 100%; 
 
    /*padding: 0 !important;*/ 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>

出典

2017-10-10 18:32:17 worc

0 

.portfolio h2 { 
 
    text-align: center; 
 
    font-size: 2.5em; 
 
    color: #27292d; 
 
    padding-top: 4%; 
 
    line-height: 1.3; 
 
} 
 

 
.port { 
 
    text-align: center; 
 
    color: #27292d; 
 
    padding-bottom: 3%; 
 
} 
 

 
.thumbs { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    margin-bottom: 2%; 
 
} 
 

 
.thumbs img { 
 
    width: 100%; 
 
    padding: 0 !important; 
 
} 
 

 
.portfolio a { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    width: 30%; 
 
}
<div class="portfolio"> 
 
    <section> 
 
    <h2>Past Work</h2> 
 
    <p class="port">We have worked on a diverse range of projects in the past, here is a quick snapshot:</p> 
 

 
    <div class="thumbs designthumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 

 
    </div> 
 

 
    <div class="thumbs"> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
     <a href="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781" class="swipebox"><img class="wow animated fadeInLeft" src="https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781"></a> 
 
    </div> 
 
    </section> 
 
</div>
これは、画像自体に空白を埋め

出典

2017-10-10 19:15:28

関連する問題

 関連する問題