无论是padding还是margin都只是左上下对齐边距吧？右边没有按照代码留相应边距的啊
左上下对齐了右边也做不到按照代码留空啊，这是2-2的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imooc</title>
<style>
ol {
width: 200px;
height:400px;
background-color: yellow;
list-style-type: none;
border-top: 1px dashed black;
padding:0px;
margin:100px;
}
</style>
</head>
<body>
<ol>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ol>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
</ul>
</body>
</html>这是3-1的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文章列表效果</title>
<style>
#box{
width:200px;
height:300px;
background: yellow;
}
h3{
font-size:18px;
font-weight:600;
text-align:center;
}
ul{
list-style-type:none;
padding:0;
}
li{
padding:10px;
border-top:1px dashed lightgray;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="box">
<h3>文章列表</h3>
<ul>
<li><a href="#">项目一</a></li>
<li><a href="#">项目二</a></li>
<li><a href="#">项目三</a></li>
<li><a href="#">项目四</a></li>
<li><a href="#">项目五</a></li>
</ul>
</div>
</body>
</html>按照视频所说的padding和margin都只能做到左上下对齐边距，而不是视频中说的上下左右对齐边距吧？
6
收起
正在回答
1回答
同学你好，老师的意思是padding和margin设置的值上下左右都会留出一样的间距。
可以通过给列表设置浮动， 让两个列表在一排显示， 老师这里只是给同学展示效果，在后面就业班的基础阶段会有详细的讲解
设置浮动后的效果图：可以看出第一个列表与第二个列表之间有一定100px的距离哦
对于第二段代码， 可以可以增加li中的问题， 由于设置了padding值，文字不会挨着右侧边显示， 而是有一定的空白距离
综上， 设置了padding和margin值之后， 他的上下左右四个方向都会有相同的间距。例：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星