注意：

行内元素的内边距的top和bottom是不起作用的，想让他起作用要让他变成块元素加：display：bloock

注意：

如果元素设置了背景，那么背景会填充到内容区+内边距区

利用padding设置导航条练习：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
ul li{list-style: none; height: 35px; }
ul li{float: left;display: block; padding: 0px 30px;
background: url("img/百度.png") no-repeat; background-size: 28px;
background-position: 1px 7px;
}
a{text-decoration: none;color: black; font-family: "microsoft sans serif";z-index: 100;
}
a:hover{background-color: blue;}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">量贩装</a></li>
<li><a href="#">生鲜区</a></li>
<li><a href="#">企业采购</a></li>
<li><a href="#">家电区</a></li>
</ul>
</body>
</html>

显示如下：

　　　　　　　　　　

css盒子模型 padding的更多相关文章

  1. 前端 CSS 盒子模型 padding 内边距 属性

    padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容区域的颜色一样.也就是说background-color这个属性将填充所有的bor ...

  2. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  3. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  4. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  5. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  6. 标准的CSS盒子模型？与低版本IE的盒子模型有什么不同的？

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  7. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

  8. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  9. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

随机推荐

  1. BZOJ 2594: [Wc2006]水管局长数据加强版（kruskal + LCT）

    Description SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一 ...

  2. Angularjs 中文版API v1.3.9 阅读

    http://www.angularjsapi.cn/#/bootstrap 2016.7.4 ng.function: 1.angular.bind(self,fn,args ); 2.angula ...

  3. Turtlebot入门篇

    0.什么是TurtleBot? 我自己的理解就是:TurtleBot是一款移动机器人,就是主要研究让机器人自主决定应该想那个方向走,怎么绕过障碍物,最终到达目的地.与之对应还有很多机器人,比如goog ...

  4. apache开启rewrite重写

    命令开启 sudo a2enmod rewrite sudo /etc/init.d/apache2 restart 即可开启重写,不行的话再试下下面方法 ubuntu如何开启Rewrite模块 在终 ...

  5. master page

    <?xml version="1.0"?><configuration>  <system.web>    <pages clientID ...

  6. plsql和oracle错误记录

    昨天oracle密码搞忘记了,根据网上方法弄了不管用,索性直接删掉数据库,然后重建,再次登陆的时候既然报错, 说我适配器错误,我靠,这是闹哪样,找了好多方法,都解决不了. 然后上班问一个oracle大 ...

  7. Web网页的了解内容

    一.因特网(互联网) 1.发展阶段: A 实验科研阶段 B社会化应用启动阶段 C社会化应用阶段 2.基本特征:资源共享 二.万维网 1.全称全球信息网(World Wide web),简称Web 2. ...

  8. 制作web字体：CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  9. Java Code Examples for PhantomJSDriverService

    Example 1 Project: thucydides   File: PhantomJSCapabilityEnhancer.java View source code Vote up 6 vo ...

  10. SNMP OID列表 监控需要用到的OID

    zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...