xw_chan 2016-11-10 02:27 采纳率: 50%
浏览 1522

想问关于html,css基础问题,关于块之间的间隙。

想问的是为什么红色框框和灰色框框之间有条缝隙,我用浏览器查看发现没有项目占着那个位置,但是就是有个空隙在中间。

html的代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <title>My First Website</title>
</head>
<body>
    <header>
        <nav class="clearfix"> <!--导航开始-->
            <div class="logo c1">FIRST</div>
            <div class="items c2">
                <ul>
                    <li><a href="#">item1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                </ul>
            </div>
        </nav>
        <div class="inner">
            <h1>My First Website</h1>
                <div class="h1-sub">
                16.11.09
                </div>
        </div>
    </header><!--导航结束-->
    <div class="content"><!--内容开始-->
    <div class="contanter">
    <div class="story-item">
                <h2>第一个只用了html和css的网站</h2>
                <div class="summary">用了只是学了两三天的技能来实现一个网页的布局,看似简单却一点都不容易,margin的问题真的很多,div也是一个大问题,主要是要理解选择器之间的关系。
            </div>
            <div class="info">16.11.10|作者:Chan|阅读:1</div>
            </div>
        </div>
    </div><!--内容结束-->
    <footer><!--页尾开始-->
    </footer><!--页尾开始-->
</body>
</html>

css的代码

 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1{
  margin: 20px;

}
ul{
  margin: 0;
  padding: 0;
}

.c1,.c2{
  position: relative;
  float: left;

}

.c1{
  width: 16.666666%;
}

.c2{
  width: 83.333333%;
}

.clearfix:before
{
  content: " ";
  display:table;
}

.clearfix:after
{
  content: " ";
  display:table;
}

.logo{
  font-size: 20px;
  padding: 18px;
  font-weight: 900;
  color: #ddd;
}

header{
  min-height: 350px;
  background-color: #aaa;
}

nav{
  background-color: #333;
}
nav .items ul{
  float: right; 
  padding-right: 20px;
}

nav ul li{
  list-style: none;
  display: inline-block;
}

nav ul li a{
  display: inherit;
  text-decoration: none;
  padding: 20px 10px;
  color: #fff;
}

/*nav end*/
.inner {
  width: 400px;
  margin: 150px auto 20px;
  position: relative;
  text-align: center;

}

.h1-sub{
  font-weight: 900;
  text-align:right;
  padding: 20px;
}

.contanter{
  width: 1000px;
  margin: 0 auto;
  background-color: red;

}

.story-item h2{
  font-size: 30px;
  margin: 10px 0;
  font-family: Microsoft Yahei;
  color: #444;
}

.story-item .summary{
  font-size: 18px;
  font-family: Microsoft Yahei;
  width: 500px;
  font-weight: 100;
  color: #777;

}
  • 写回答

5条回答

  • humorHan 2016-11-10 02:32
    关注

    dom之间会有默认的间距,而且不同浏览器的默认间距可能是不一样的,需要手动清楚~ 这就是常说的css reset

    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题