CSS 内边距

最新推荐文章于 2022-03-25 20:05:43 发布

_wjl_

最新推荐文章于 2022-03-25 20:05:43 发布

阅读量547

点赞数

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

内边距（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>

在这里插入图片描述

_wjl_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 内边距

内边距（padding）padding属性用于设置内边距。是指边框与内容之间的距离。padding-top:上内边距padding-right:右内边距padding-bottom:下内边距padding-left:左内边距<!DOCTYPE html><html lang="en"><head> <meta charset="UT...
复制链接

扫一扫