HTML+CSS 轻松入门之盒子模型之填充

元素内容与边框之间是可以设置距离的,称之为“填充”。填充也可分为上、右、下、左(顺时针)

下面我们写一个实例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
      div{
       width:200px;
       height:100px;
       border:1px solid red;
       padding:10px 10px 10px 10px;
      }
  </style>
</head>
<body>
    <div>php中文网</div>
</body>
</html>

其实也可以这么写

div{
    padding-top:10px;
    padding-right:10px;
    padding-buttom:10px;
    padding-left:10px;
}

如果都是一样也还可以这样写

padding:10px;

顺序是上  右  下  左 

如果上下值相同,左右值相同,可以这样写

padding:10px 20px;

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width:200px; height:100px; border:1px solid red; padding:10px 10px 10px 10px; } </style> </head> <body> <div>php中文网</div> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

HTML+CSS 轻松入门教程

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

我又来了

没看明白啊

7年前    添加回复 0

仗义皆为屠狗辈 无情多为读书人

写的可以,能看懂

7年前    添加回复 0

看山看水看代码

写法很多,要慢慢理解

7年前    添加回复 0

末日的春天

规律是先上下,后左右,padding是内容与边框间的距离。

7年前    添加回复 0

烟雨江南

原来是这样的,理解了

7年前    添加回复 0

width和height定义的数值不是固定的吗?怎么改变padding的值盒子的大小都变了?

[最新 数据分析师 的回答] width和height定义的数值不是固定的吗?怎么改变padding的值盒子的大小都变了?-PHP中文网问答-width和height定义的数值不是固定的吗?怎么改变padding的值盒子的大小都变了?-PHP中文网问答围观一下哦,学习一下。

时间:7年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~