テーブルの下にタブ付きのナビ（class="nav nav-tabs"）を縦のスペースで表示しようとしています。アクティブなナビゲーションタブの下に行がありません
「<p> </p>」をスペーサーとして使用すると、タブが正しくレンダリングされます。しかし、これはあまりにも多くのスペースです。私は "<br />"を使用することを好む。
ただし、「<br />」を使用すると、最初の[アクティブ]タブの下端に水平線が表示されます。それは間違っている。
それは次のようになります。ここでは
がコードです。私は（非常に有用ではない？）ちょうど私のサイト上で、JSFiddleに問題が表示されませんが...
https://jsfiddle.net/iamrobertandrews/ndkmw1te/
問題はChromeではなく、SafariでのiOSやMacのいずれかで明らかですOS X.
<br/>タグには、最初の子供にボーダーボトムスタイルを追加するCSSがあるようです。
私はあなたの例をフォークし、あなたが探しているマージンを提供するために少しCSSを追加しました。
https://jsfiddle.net/xor4x5dw/
.nav.nav-tabs {
margin-bottom: 10px
}
そして、ここであなたがタブの上または下にスペースを望んでいた場合、私は言うことができなかったとして、別の例です。
https://jsfiddle.net/607kn7b1/
.nav.nav-tabs {
margin-top: 10px
}
また、これで、あなたは間隔のためのPタグとBRタグの使用を削除することができます。
タブの上に1つのテーブルしかなければ、すべてが問題ありません。 '
'アクティブなタブに移動します。しかし、上記の2つ以上のテーブルがそれを投げる。 –
RGeoffrey - あなたの方法（すなわち、 '
'や '
'の代わりに 'margin-top'を使って）を使っても私にとってはうまくいかないようです。アクティブなタブには、引き続き水平の下の行が表示されます。 Chromeでは、のみ。 –
質問に記載されているように、問題を再現できなかったjsfiddleリンクを提供しているとは限りません。可能な限りコードを絞り込んで投稿することをおすすめします関連するビットはここに...実際にはあなたがプロセス内の犯人を見つけることができる...;） – webeno
そして、私がそのような場合に一般的に何をするかは、場合はアクティブなタブ）、[検査]をクリックします（ChromeまたはFirefoxを使用していると仮定します）。その要素に適用されるCSSルールが表示されます... Chromeは、その特定の要素に行ごとに適用されるすべてのCSSルールを一覧表示する右側に「計算済み」タブを表示します（Firefoxについてはわかりません）。それが親と子要素を見たいと思っているのですが、どこかにその境界線があるかどうかを確認してください... – webeno