无论是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都只能做到左上下对齐边距，而不是视频中说的上下左右对齐边距吧？

慕数据0164170 2019-08-07

源自：动态文章列表效果 3-1 文章列表效果

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2019-08-07 11:24:48

同学你好，老师的意思是padding和margin设置的值上下左右都会留出一样的间距。

可以通过给列表设置浮动，让两个列表在一排显示，老师这里只是给同学展示效果，在后面就业班的基础阶段会有详细的讲解

设置浮动后的效果图：可以看出第一个列表与第二个列表之间有一定100px的距离哦

对于第二段代码，可以可以增加li中的问题，由于设置了padding值，文字不会挨着右侧边显示，而是有一定的空白距离

综上，设置了padding和margin值之后，他的上下左右四个方向都会有相同的间距。例：

如果帮助到了你，欢迎采纳！

祝学习愉快~~~~

收起回答

慕数据0164170 提问者 #1

我的意思我觉得是他是有默认设置的（默认贴近左上），讲解时应该提到虽然padding和margin会四方向留边距，但是由于默认贴近左上，在视觉上是可能看不出来右和下留出了相应的边距（除非手动更改字符位置或者有别的字符相邻）

2019-08-07 12:39:53
好帮手慕慕子回复提问者慕数据0164170 #2

同学你好，默认是贴近左上，你的理解是可以的，对于同学的建议，我会进行记录，并向上反馈的，祝学习愉快~~~

2019-08-07 13:09:27