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

关于margin和padding问题

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>不定宽块状元素水平居中</title>

<style>

.container{

    float:left;

position:relative;

left:50%

}


.container ul{

list-style:none;

margin:0;

padding:0;

position:relative;

left:-50%;

}

.container li{float:left;display:inline;margin-right:8px;}



/*下面是代码任务区*/


.wrap-center{

    background:#ccc;

    position:relative;

    left:-50%;

    margin:0;

    padding:0;

   

   

    

    

}

.wrap{

    position:relative;

    left:50%;

    float:left;

    clear:both;

    

    

}


</style>

</head>


<body>

<div class="container">

<ul>

    <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>


<!--下面是代码任务区-->

<div class="wrap">

    <div class="wrap-center">我们来学习一下这种方法。</div>


</div>

</body>

</html>

要不要给.wrap-center加上margin:0; padding:0;呢,我感觉加上了没什么效果啊

正在回答

2 回答

{margin:0; padding:0;}这是一种很常见的写法,你以后接触项目就会发现,不同的浏览器对 body ,ul, li ,p,h1~h6,dd,dt 等等属性都有不同的margin 值或padding值的,加上这个就可以覆盖浏览器这些默认值,使页面在不同浏览器中样式统一,不同浏览器中页面展现出来的效果一致,要不然怎么会有浏览器兼容性这个说法呢

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

慕田峪9304305 提问者

非常感谢!
2018-05-05 回复 有任何疑惑可以回复我~

因为无序列表创立时默认有外边距,而内填充则是前面的  · 点。而段落则默认填充和边距为0.

你可以自己动手试一下。给列表ul设置背景颜色#ccc预览,再依次加上margin和padding为0预览。再试下段落。


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

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1226213    人
  • 解答问题       18236    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

关于margin和padding问题

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