margin的问题
发布在每周总结2015年4月28日view:1959CSS
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

1,块元素

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <a href="###">dede</a>
  </div>
</body>
</html>

css:

div{
  width: 100px;
  height: 100px;
  background: #000;
}

a{
  margin-top: 20px;
  display: block;
  background: red;
}

这个结果是外层div的margin值发生改变或者说整体发生了移动,这明显不是我要的结果。经过实验有两种方法:

1,改为行内块元素,如下:

    a{
      margin-top: 20px;
      display: inline-block;
      background: red;
    }

不过这个有一点不好,就是不再占据一整行,如果有需要可以用下面一种:

2.浮动:

   a{
  margin-top: 20px;
  float: left;
  clear: left;
  background: red;
}

且清除浮动。

完。

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
每周总结

尽量写点东西吧

友情链接 大搜车前端团队博客
我的收藏