2014-12-07 98 views
0

我開發這個網站通過使用wordpress和客戶端請求一個自定義欄(www.orbit.yetu.co.tz)但是,一旦我插入圖像,並創建一個div ,它會自動在導航欄之間自動生成一個空白區域。我想刪除元素之間的空白html/css

<body <?php body_class($body_classes); ?>> 

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
<!-- Main Container --> 
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
<div class="main-container"> 

    <!-- This is a custom bar added by me --> 
    <div id="main-topbar"> 
    <img src="http://orbit.yetu.co.tz/wp-content/uploads/2014/12/top-bar-new.jpg" alt="Orbit Securities" style="margin-left:auto;margin-right:auto;width:1180px;height:90px"> 
    </div> 
    <!--This is the end of the top bar --> 

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
    <!-- Top Bar - Set "white" or "dark" below --> 
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
    <div class="header <?php echo $basix_options['top_bar_style'] ?><?php if ($basix_options['fixed_header'] != FALSE) { ?> sticky<?php } ?>"> 
     <div class="topbar content-width"> 

      <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
      <!-- Logo --> 
      <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 

我在做什麼錯?

回答

0

添加display: inline-block到圖像上的<img>

0

vertical-align: bottom

圖像是內聯元素,默認情況下它們與基線對齊。基線位於線框實際底部之上約2px處(實際間距取決於字體和字體大小)。你注意到了這個差距。

+0

更好地使用disply:block,正如我在我的答案中所建議的那樣。 – 2014-12-07 16:12:25

+0

爲什麼_better_? – 2014-12-07 16:14:36

+0

在我看來,因爲它與字體大小無關。 – 2014-12-07 16:59:01

0

我檢查你的代碼,首先,我建議在圖像中添加一個類,以更好地處理CSS。

要解決該錯誤,請將display: block;屬性應用到它,以擺脫line-height,實際上圖像默認情況下定義爲內聯元素,因此它們遵循文本規則。

這裏看到一個生動的例子of the difference between inline and block屬性適用於圖像。

並看看here以更好地理解差異背後的理論。