训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
指定一个元素的边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>
边距缩写属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距的段落.</p>
<p class="margin">这是具有指定页边距的段落.</p>
</body>
</html>
文本顶部边距设置的值使用厘米
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>没有规定页边距的段落.</p>
<p class="ex1">顶部距2厘米的段落.</p>
<p>没有规定页边距的段落.</p>
</body>
</html>
使用百分比值设置文本的底部边缘
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified.</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin.</p>
<p>This is a paragraph with no margin specified.</p>
</body>
</html>
使用厘米值设置文本的左边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.ex1 {margin-left:2cm;}
</style>
</head>
<body>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm left margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)