問題タブ [border-box]

私は明らかに間違ったことをしていると確信していますが、それを理解することができませんでした。ライトボックスのサイズは動的 (パーセンテージ幅) で、ライトボックス内のコンテンツは、コンテンツの周囲の境界線 (実際にはボックスの影) を移動することなく、小さな画面で必要に応じて垂直方向にスクロールしたいと考えています。

追加の警告として、動的な高さを持つ「コンテナー」div が必要です。コンテナの div を height: 100% に設定すると、ライトボックスは希望どおりに機能しますが (以下のコードを参照)、高さの設定を削除すると、オーバーフローが正しく機能しなくなります。

動作中のライトボックスのこのデモは、私の質問を明確にするのに役立つはずです:

http://viewer.zmags.com/public/a82492b9?viewType=pubPreview

これが私のCSSです：

そして私のHTML：

この画像で同様の効果を達成しようとしています: http://i.imgur.com/zTkMou8.jpg div の内側の境界の丸みを帯びたエッジ。CSSでそれを行うことは可能ですか？div はレスポンシブでいっぱいであると想定されるため、div のサイズに応じて小さくまたは大きくできる境界線効果を持たせるのが最善です。

20px のパディングを持つ親 div があります。この div 内には、2 つの span タグがあります。幅を親 div の 50% にして、同じ行に収めたいと思います。box-sizing: border-box問題を解決していないようでした。

HTML

CSS

アップデート：

このユースケースには必要ではなかったようbox-sizingで、CBroe の回答はそれに応じて問題を解決します。

box-sizing:border-box を運のない疑似要素に適用しようとしています - パディング - 効果に必要 - 疑似要素の最大幅 (または幅) が 0 になるのを妨げています - 常に 0 + パディングです.

適用したい要素は<a>タグです

そして、私のCSSは明示的に要素のborder-boxを呼び出します:

ここにフィドルがあります：

https://jsfiddle.net/metaheavies/od6ko01b/

ありがとう！

このコードを検討してください

幅と高さがゼロで、パディング/ボーダーが幅と高さゼロの内側にあるため、これまでに読んで理解し、使用したすべてのものによると、これは何も表示されません。box-sizing: border-box;

ただし、表示されるのは 26x26 ボックス ((12 パディング + 1 ボーダー)*2) です。何を与える？なぜborder-boxここで働いていないのですか？

オーバーレイの暗い背景とキャプション テキストを持つ画像でギャラリーを作成しています。配置は問題ありませんが、コンテナ要素でパディングが使用されているため、オーバーレイ div が画像の境界から外れています。

border-box私はいくつかの場所でそれについて読み、この問題を解決できることを学びましたが、そうではありません. ここで何か間違ったことをしていますか？コードをチェックしてください：

HTML:

CSS:

プレイグラウンド リンク:コード ペン

Chrome で画像の周りに奇妙なボックスが表示されます。ここに例があります: http://ulrikhogrebe.com/projects/bbcme.html - クロムで開き、ヘッダー画像 (白黒) の下の最初の画像を見ると、その周りに境界線が表示されます。 （見逃した場合はブラウザをスケーリングしてください）。試したボーダー: 0; -しかし、それを失うことはできないようです。また、Firefoxでも問題ありません。

何か案は？

各アイテム間に5pxのパディングを設定しましたが、5px + 5pxは兄弟アイテム間で10pxになります（水平、垂直も10pxになりました）

http://plnkr.co/edit/7FKBiTocHrTuwnpEqQsu?p=preview

すべての間に5pxの正確なパディングまたはスペースを取得する方法はありますか?

注: + 演算子を試しましたが、6 番目の項目に副作用があります。これらの 10 項目は兄弟であるためです。