为什么我的a标签可以设置margin-top？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <!DOCTYPE html><html><head> <meta charset="UTF-8"><title>IMOOC</title><style>*{padding:0;margin:0;font-family:"微软雅黑";color:white;}a{text-decoration:none;font-size:20px;} header{background-color:black;width:1200px;height:80px;} .container{margin:0 auto;height:80px;width:1000px;line-height:80px;} .container > a{float:left;padding-left:20px;box-sizing:border-box;font-size:24px;margin-top:15px;} nav{float:right;height:70px;} nav > a{display:block;line-height:70px;float:left;width:100px;text-align:center;} nav > .home{background:red;} nav > .course{background:yellow;} nav > .actual{background:green;} nav > .plan{background:purple;} nav > .faq{background:orange;} nav > .notes{background:blue;} nav a:hover,nav > a.active{padding-bottom:10px;}</style></head><body><!-- 在此完成网页的HTML代码--><header> <div class="container"> <a href="#"><img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"/>MYMOOC</a> <nav> <a class="home active" href="#">HOME</a> <a class="course" href="#">COURSE</a> <a class="actual" href="#">ACTUAL</a> <a class="plan" href="#">PLAN</a> <a class="faq" href="#">FAQ</a> <a class="notes" href="#">NOTES</a> </nav> </div></header></body></html> |
在.container > a里我设置了margin-top是有效果的，但不是说行标签只能设置margin左右而不能设置上下嘛，为什么我这就可以呢
0
收起
正在回答
2回答
同学你好， 因为你给container下的a标签设置左浮动了， 浮动元素的display属性表现为block哦。
可以通过控制台检查元素 ，如下图所示:
建议： 可以给logo图片设置上外边距， 实现图片和上方的距离， 另， 也可以给图片设置左浮动， 让整体效果实现更好哦
效果图：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
weixin_慕设计7122316
2019-08-13 11:29:34
代码里面已经将a标签转成块级元素了。 display:block
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧