1
私はいくつかのdivを含む問題について助けを求めていました。div要素間のギャップ
私はBBCのウェブサイトを作り直すためにUdemyコースをやっていますが、私はコンテンツがあるdivを持っていますが、それらの間にはギャップがあります。
body \t {
\t margin: 0;
\t padding: 0;
\t font-family: Helvetica, Arial;}
#topbar \t \t \t \t \t { \t
\t width: 1050px;
\t margin: 0 auto;
\t height: 40px;}
\t
#bbclogo \t \t \t \t {
\t margin-top: 8px;
\t float:left;
\t margin-right: 10px;}
\t
.topbar-section \t \t \t {
\t float:left;
\t border-left: 1px solid #CCCCCC;
\t height: 100%;}
\t
#signinimage \t \t \t {
\t margin: 10px 15px;
\t height: 20px;
\t float: left;} \t
\t
#signin-text \t \t \t {
\t font-weight: bold;
\t font-size: 14px;
\t position: relative;
\t top: 12px;
\t padding-right: 65px;
\t } \t \t \t \t \t \t
#signin-div \t \t \t \t {
\t float:left;} \t
\t
#wiggly-line \t \t \t {
\t height: 40px;
\t float: left;}
#bello-image \t \t \t {
\t height: 26px;
\t margin: 7px 15px 7px 12px;
\t float: left;} \t
\t
.topbar-menu \t \t \t {
\t font-weight: bold;
\t font-size: 14px;
\t padding: 13px 13px 0 13px;
\t height: 27px;}
#more-arrow \t \t \t \t {
\t height: 4px;
\t margin-left: 25px;}
#searchbox \t \t \t \t {
\t background-color: #E4E4E4;
\t border: none;
\t font-weight: bold;
\t font-size: 15px;
\t padding: 5px;
\t margin: 8px 0 8px 8px;
\t float: left;} \t
#magnifying-glass \t \t {
\t margin-top: 8px;
\t height: 27px;
\t } \t
.clear \t \t \t \t \t {
\t clear: both;} \t
#menu-bar-container \t \t {
\t background-color: #BB1919;
\t width: 100%;
\t height: 60px;} \t
#menu-bar \t \t \t \t {
\t width: 1050px;
\t margin: 0 auto;} \t
h1 \t \t \t \t \t \t {
\t margin: 0;
\t padding: 0;
\t color: white;
\t font-size: 40px;
\t font-weight: normal;
\t padding-top: 10px;
\t float: left;} \t
#local-news \t \t \t \t {
\t float: right;
\t border: 1px solid #BB4545;
\t width: 175px;
\t margin: 15px 10px;
\t padding: 5px 5px 4px 5px;} \t
#local-news a \t \t \t {
\t color: white;
\t text-decoration: none;
\t font-size: 20px;
\t position: relative;
\t top: -2px;}
\t
#local-news:hover \t \t {
\t text-decoration: underline;}
#local-news img \t \t \t {
\t height: 20px;
\t padding-left: 10px;}
#menu-bar-container-2 \t {
\t width: 100%;
\t background-color: #A91717;
\t display: block;} \t
#menu-bar-2 \t \t \t \t {
\t width: 1050px;
\t margin: 0 auto;
\t height: 35px;
\t display: block;} \t \t \t \t \t \t \t
#menu-bar-2 a \t \t \t {
\t color: white;
\t text-decoration: none;
\t padding: 0 16px;
\t border-right: 1px solid #BB4545;
\t font-size: 12px;
\t position: relative;
\t top: 9px;
\t float: left;}<div id="topbar">
\t \t <!--white top bar-->
\t \t <img id="bbclogo" src="Images\bbclogo.png"/>
\t \t <!--left border div with classes-->
\t \t <div id="signin-div" class="topbar-section"></div> \t
\t
\t \t <!--Signin image-->
\t \t <div id="signin-div">
\t \t \t <img id="signinimage" src="Images\signinimage.png"/>
\t \t \t <span id="signin-text">Sign in</span>
\t \t </div>
\t
\t \t <!--Bell div-->
\t \t <div id="bell-div">
\t \t \t <img id="wiggly-line" src="Images/pointed_line.png"/>
\t \t \t <img id="bello-image" src="Images/bell.png"/>
\t \t </div>
\t \t <!--Menubar links-->
\t \t <div class="topbar-section topbar-menu">
\t \t \t News
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t Sport
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t Weather
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t iPlayer
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t TV
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t Radio
\t \t </div>
\t \t <div class="topbar-section topbar-menu">
\t \t \t More
\t \t \t <img id="more-arrow" src="Images/arrow.png"/>
\t \t </div>
\t
\t \t <!--Search bar-->
\t \t <div class="topbar-section">
\t \t \t <input id="searchbox" type="text" placeholder="Search">
\t \t \t <input type="image" id="magnifying-glass" src="Images/glass.png"/>
\t \t </div>
\t
\t </div>
\t <!--To clear previous floats-->
\t <div class="clear"></div>
\t
\t <!--Menu bar-->
\t <div id="menu-bar-container">
\t
\t \t <div id="menu-bar">
\t \t \t <h1>NEWS</h1>
\t \t \t <div id="local-news">
\t \t \t \t <a href="">Find local news</a>
\t \t \t \t <img src="Images/pointer.png">
\t \t \t </div> \t
\t \t \t
\t \t </div>
\t \t
\t \t
\t </div>
\t <!--Menu bar 2-->
\t <div id="menu-bar-container-2">
\t \t <div id="menu-bar-2">
\t \t <a href="">Home</a>
\t \t <a href="">UK</a>
\t \t <a href="">World</a>
\t \t <a href="">Business</a>
\t \t <a href="">Politics</a>
\t \t <a href="">Tech</a>
\t \t <a href="">Science</a>
\t \t <a href="">Health</a>
\t \t <a href="">Education</a>
\t \t <a href="">Entertainent & Arts</a>
\t \t <a href="">Video & Audio</a>
\t \t <a href="">More</a>
\t \t </div>
\t </div>私はいろいろなこと（、表示の変更、フローティング、以前のdivをクリアしようとしている...）で遊んでみましたが、私は問題を把握するように見えることはできません。私は何が間違っているのかについていくつかのアドバイスを期待していました。
divの間の空白が問題になることがあります。これが問題だろうか？
事前
で感謝を（私は上記のコードを作成したときに妙に、ギャップが結果ウィンドウに表示されていなかったが、私はクローム、IEやFirefoxでそれをしようとすると、問題が発生します）
'
どのディビジョンにギャップがありますか？彼らはあなたがIditisの重度のケースを持っていますが、それらはすべてここでうまく見えます。 –
あなたはCSSリセットを使用していますか？ –