Question

我正在使用wordpress开发这个网站，并且客户端请求了一个自定义栏（www.orbit.yetu.co.tz）但是一旦我插入了图像并为它创建了一个div，它就会自动在它自己和它之间产生一个空格。导航栏。

    <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 -->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

我做错了什么？

Answer 1

将display: inline-block添加到<img>

Answer 2

我检查你的代码，首先，我建议在图像中添加一个类，以便更好地处理CSS。

要修复错误，请对其应用display: block;属性，以删除line-height，实际上默认情况下，图像被定义为内联元素，因此它们遵循文本规则。

在此处查看实时示例of the difference between inline and block属性适用于图像。

看看here，以便更好地理解差异背后的理论。

我想删除元素html / css之间的空白区域

2 个答案: