Question

helpers :)我在标题和导航栏之间有一个间隙，这种情况发生在除index.html之外的所有页面上。请在此处查看网站：danachapmanmassage.com。我已经检查过我是否有任何边距，填充或边框正在影响它 - 没有找到任何。

HTML

        <header>
                <img src='images/5for5.png' 
                alt='Special Offer: 5 massages for just $50 each! Available through January, 2015.'>
        </header>


        <nav>
            <ul>
                <li><a href='index.html'>Home</a></li>
                <li><a href='services.html'>Services</a></li>
                <li><a href='about.html'>About</a></li>
                <li><a href='contact.html'>Contact</a></li>
            </ul>
        </nav>

CSS主要样式

header {
    width: 100%;
    }


    /* ============================================= Nav Styles ============================================= */
nav {
    width: 100%;
    height: 2.5em;
    background: -webkit-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* Standard syntax */
    } 

nav ul {
    width: 100%;
    text-align: center;
    }

nav li {
    width: 25%;
    padding-top: .75em;
    list-style-type: none;
    float: left;
    }

nav a {
    font-family: 'abeatbykairegular';
    font-size: 1em;
    text-decoration: none;
    color: #ffffff;
    }

nav a:hover {
    color: #42210B;
    }

CSS页面特定样式（对于services.html）

header img {
    width: 100%;
    }

menu {
    width: 100%;
    margin-top: 2%;
    }

menu ul {
    width: 40%;
    margin-left: 56%;
    }

menu li {
    width: 20%;
    list-style-type: none;
    text-align: center;
    float: right;
    }

menu a {
    font-family: 'abeatbykairegular';
    font-size: .85em;
    text-decoration: none;
    color: #ffffff;
    }

menu a:hover {
    color: #42210B;
    }

任何帮助将不胜感激！

Answer 1

修改您的styles2.css文件。

从第23行开始应该如下所示：

CSS：

header img {
    width: 100%;
    display: block;
}

Answer 2

解决这个问题的几种方法：

img

display:block

或

img

vertical-align:bottom

以下是对差距的解释：

MDN

关于CSS，<img>是替换元素。它没有基线，在内联格式化上下文中使用时的含义 vertical-align: baseline，图像的底部将构成容器的基线。

Answer 3

它与display元素的<img>属性的值有关，默认情况下为inline。

内联元素（包括inline-block个）被浏览器的渲染引擎（有点）视为文本。这意味着您的代码格式可能会影响元素的显示方式。

将标题的图片display属性更改为block应该可以解决您的问题。

如果你想了解更多关于它并在其他场合学习如何解决这个问题，克里斯科伊尔的这篇文章：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

- FF

Answer 4

在CSS styles1.css中更改样式如下

header {
    background-image: url("images/texture2.jpg");
    height: 55%;
    margin-top: -10%;
}

删除标题（标题图像？）和导航之间的差距

4 个答案: