6

2つのビデオタグ間のギャップを減らす方法、マージンとパディングを試してみましたが、うまくいきませんでした。

デモ

私のHTML

<div class="videoTest">
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
</div>

私のCSS

.videoTest > video{
    border:1px solid red;
    margin:0;
    padding:0;    
}
4

6 に答える 6

1

この問題を解決するためのさまざまな方法を提供するリンクを見つけました。参考になるかもしれません。

2012 年 4 月 21 日公開 Chris Coyier

これが取り引きです: 通常 HTML をフォーマットするようにフォーマットされた一連のインラインブロック要素は、それらの間にスペースがあります。

言い換えると：

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

結果は次のとおりです。

多くの場合、非常に望ましくありません (出力のリンクを確認してください)。

多くの場合、要素を互いに突き合わせたいと考えています。ナビゲーションの場合、クリックできない小さなギャップを避けることができます。

これは「バグ」ではありません (私はそうは思いません)。これは、行に要素を設定する方法です。入力する単語間のスペースをスペースにしたいですか？これらのブロック間のスペースは、単語間のスペースのようなものです。仕様を更新して、インライン ブロック要素間のスペースを空けるべきではないと言っているわけではありません。

ギャップを埋めて、インライン ブロック要素を隣り合わせに配置する方法を次に示します。スペースを削除します

スペースを取得する理由は、要素間にスペースがあるためです (明確にするために、改行といくつかのタブがスペースとしてカウントされます)。最小化された HTML は、この問題、または次のトリックのいずれかを解決します。

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

また

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

またはコメントで...

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

それらはすべてかなりファンキーですが、うまくいきます。マイナスマージン

マイナス 4 ピクセルの余白を使用して、要素を所定の位置に戻すことができます (親のフォント サイズに基づいて調整する必要がある場合があります)。どうやらこれは古い IE (6 および 7) では問題があるようですが、これらのブラウザーを気にしないのであれば、少なくともコードのフォーマットをきれいに保つことができます。

nav a {
  display: inline-block;
  margin-right: -4px;
}

終了タグをスキップ

とにかくHTML5は気にしません。認めざるを得ませんが、奇妙に感じます。

<ul>
  <li>one
  <li>two
  <li>three
</ul>

フォントサイズをゼロに設定

font-size がゼロのスペースは...幅がゼロです。

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Matt Stow は font-size: 0; を報告しています。この手法には、Android でいくつかの問題があります。引用: 「Pre-Jellybean はスペースをまったく削除しません。Jellybean にはバグがあり、最後の要素にランダムにわずかなスペースができます。」研究を参照してください。また、ems でフォントのサイズを変更している場合、ems カスケードの子もゼロのフォント サイズになるため、このゼロのフォント サイズが問題になる可能性があることに注意してください。ここでは Rems が役に立ちます。別の奇妙さ！Doug Stewart は、この手法で @font-face を使用すると、Safari 5.0.x でフォントのアンチエイリアスが失われることを示してくれました。（テストケース）（スクリーンショット）。代わりにそれらを浮かべてください

インラインブロックである必要はまったくないかもしれませんし、何らかの方法でフロートできるかもしれません。これにより、幅と高さ、パディングなどを設定できます。text-align: center; のように中央に配置することはできません。インライン ブロック要素の親。うーん...ちょっとできるけど変だ。代わりにフレックスボックスを使用してください

ブラウザのサポートが受け入れられ、インラインブロックから必要なものがセンタリングである場合は、フレックスボックスを使用できます。それらは正確に交換可能なレイアウトモデルなどではありませんが、必要なものが得られる可能性があります.

于 2013-06-24T12:37:45.313 に答える