这个高度从何而来？网页检查器不显示？

如果你看一下标题，右边有一个电话号码和一个电子邮件。现在由于某种原因，两者之间有这个空间我完全不知道这个空间是从哪里来的?

我没有为它设置padding或height，网页检查器就是不显示它。

<html>
<head>
    <title>www.WebDesignGuy.com || Professional Website Design and Website Development Services</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div class="col-sm-6" id="logo_container">
                <img src="img/logo.png" id="top_logo">
            </div>
            <div class="col-sm-6" id="cta_header_box">
                <div id="telephone">
                    <img src="img/telephone_icon.png">
                    <p>085 816 2252</p>
                </div>
                <div id="email">
                    <img src="img/email_icon.png">
                    <p>info@webdesignguy.com</p>
                </div>
            </div>
        </div>
    </div>
</header>
<nav>
    <div class="container">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Testimonials</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>
</nav>

<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS

* {
  margin: 0;
  font-family: source sans pro;
}
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100%;
  overflow: hidden;
}
/******* HEADER ****************** */
header {
  background-color: #057bad;
  padding-bottom: 10px;
}
header p {
  color: white;
}
header #telephone {
  margin-top: 10px;
  font-size: 31px;
  font-weight: 400;
  text-align: right;
}
header #telephone p {
  display: inline;
}
header #telephone img {
  position: relative;
  bottom: 5px;
  margin-right: 5px;
}
header #email {
  font-size: 16px;
  text-align: center;
  text-align: right;
}
header #email p {
  display: inline;
}
header #email img {
  position: relative;
  left: 3px;
  bottom: 3px;
  margin-right: 10px;
}
#top_logo {
  margin-top: 20px;
}
#cta_header_box {
  text-align: right;
}
/******* HEADER ****************** */
nav {
  background-color: #036994;
  padding: 5px 0;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  display: inline;
}
nav li a {
  color: white;
  text-decoration: none;
  margin-right: 30px;
  font-size: 1.2em;
}
nav li ahover {
  text-decoration: none;
  color: #057bad;
}

这个空格是因为你使用p标签设置p的外边距为0p{保证金:0;}

由于某些原因，行内元素之间有空白。我建议在这里寻找一些解决方案。你也可以在你的img标签

上使用display:inline-block;

下次请附上小提琴

相关内容

最新更新

热门标签：