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;