| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title>CSS盒子模型</title>
- <style>
- *{
- margin: 0; /*设置外边距为0*/
- padding: 0;/*设置内边距为0*/
- }
- body {
- background-color: red;
- }
- div{
- width: 100%;
- height: 100%;
- background-color: #fff;
- }
- /*外边距：margin*/
- div{
- margin-top: 50px; /*上外边距*/
- margin-left: 10px; /*左外边距*/
- margin-right: 20px; /*右外边距*/
- margin-bottom: 40px; /*下外边距*/
- margin: 100px; /*元素的上下左右外边距都是100px*/
- margin: 50px 100px; /*上下边距50 左右100*/
- margin: 10px 20px 30px 40px; /*左 上 右 下*/
- }
- div{
- padding-top: 50px; /*上内边距*/
- padding-left: 10px; /*左内边距*/
- padding-right: 20px; /*右内边距*/
- padding-bottom: 40px; /*下内边距*/
- padding: 100px; /*元素的上下左右内边距都是100px*/
- padding: 50px 100px; /*上下边距50 左右100*/
- padding: 10px 20px 30px 40px; /*左 上 右 下*/
- }
- </style>
- </head>
- <body>
- <div>啊实打实大大</div>
- </body>
- </html>
|
