CSS 内边距

    xiaoxiao2023-10-31  173

    内边距(padding)

    padding属性用于设置内边距。 是指 边框与内容之间的距离。

    padding-top:上内边距 padding-right:右内边距 padding-bottom:下内边距 padding-left:左内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内边距</title> <style> div { width: 200px; height: 200px; border: 1px solid red; /* padding-left: 20px; 左内边距 */ /* padding-top: 30px; */ /*padding: 20px;*/ /* padding: 10px 30px; 上下10 左右30 */ padding: 10px 30px 50px; /* 上10 左右30 下50 */ padding: 10px 20px 30px 40px; /*顺时针 上 右 下 左*/ } </style> </head> <body> <div>内边距 context距离边框的距离</div> </body> </html>

    fireworks 测量工具 吸管工具取色 wb 切片工具 获取宽高

    新浪导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏</title> <style> nav { height: 41px; border-color: #fcfcfc; border-top: 3px solid #FF8500; border-bottom: 1px solid #EDEEF0; } nav a { font-size: 14px; color: #4c4c4c; text-decoration: none; /* 去掉下划线 */ /*width: 100px;*/ height: 41px; /*background-color: red; 链接是行内元素没有大小 所有需要转换 */ display: inline-block; padding: 0 15px; /* 上下0 左右15 */ line-height: 41px; /* 行高等于高度 文字垂直居中 */ } nav a:hover { /* 链接伪类选择器 鼠标经过变色 */ background-color: #EEE; } </style> </head> <body> <nav> <a href="">首页</a> <a href="">手机新闻网</a> <a href="">网站导航</a> <a href="">新链接</a> </nav> </body> </html>

    最新回复(0)