为了账号安全,请及时绑定邮箱和手机立即绑定

我发现main标签里套了个p标签以后,main块的背景色就无法接到顶部了

我发现main标签里套了个p标签以后,main块的背景色就无法接到顶部了,http://img1.sycdn.imooc.com//57fa4ad80001e3ff08060253.jpg

但是给main加个border以后,就又可以了,这是咋回事 ?我猜测是不是p标签默认了带着段落间距啥的样式?

http://img1.sycdn.imooc.com//57fa4af300017bf108490254.jpg

代码如下


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>三列布局</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; font-weight:bold}

div{ line-height:50px}

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}

.main{ height:600px;margin-left:210px;margin-right:310px;background:#9CF}

.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

</style>

</head>

 

<body>

   

    <div>left</div>

    <div><p>设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的,你可以领会要点,举一反三。</p></div>

    <div>right</div>

</body>

</html>


正在回答

1 回答

p 元素会自动在其前后创建一些空白。

body,p{ margin:0; padding:0; font-size:30px; font-weight:bold}

取消默认样式,可以解决这问题。

0 回复 有任何疑惑可以回复我~
#1

林鸿伯3985306 提问者

nice! 试了下应该是margin
2016-10-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

我发现main标签里套了个p标签以后,main块的背景色就无法接到顶部了

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信