训练营 坚持完成打卡任务 报名费全额返 更多>>
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.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>这是一个没有左内边距的文本.</p>
<p class="padding">此文本的左内距为2厘米.</p>
<p class="padding2">此文本的左填充为50%.</p>
</body>
</html>
设置元素的右部填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>
<body>
<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>
</body>
</html>
设置元素的顶部填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>
<body>
<p>这是一个没有顶部填充的文本. 这是一个没有顶部填充的文本. 这是一个没有顶部填充的文本.</p>
<p class="padding">此文本顶部有2厘米的填充. 此文本顶部有2厘米的填充.此文本顶部有2厘米的填充.</p>
<p class="padding2">此文本的顶部填充为50%。 此文本的顶部填充为50%。此文本的顶部填充为50%。</p>
</body>
</html>
设置元素的底部填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.padding {padding-bottom:2cm;}
p.padding2 {padding-bottom:50%;}
</style>
</head>
<body>
<p>这是一个没有底部填充的文本. 这是一个没有底部填充的文本. 这是一个没有底部填充的文本.</p>
<p class="padding">此文本的底部填充为2厘米. 此文本的底部填充为2厘米. 此文本的底部填充为2厘米.</p>
<p class="padding2">此文本的底部填充为50%.此文本的底部填充为50%. 此文本的底部填充为50%.</p>
</body>
</html>
在一个声明中的所有填充属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">这段文字每边的内边距相等。两边的衬垫是2cm.</p>
<p class="ex2">该文本的上下padding为0.5cm，左右padding为3cm.</p>
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)