注意：

行内元素的内边距的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. 史上最易懂的Android jni开发资料--NDK环境搭建

    谷歌改良了ndk的开发流程,对于Windows环境下NDK的开发,如果使用的NDK是r7之前的版本,必须要安装Cygwin才能使用NDK.而在NDKr7开始,Google的Windows版的NDK提供 ...

  2. python对json的操作总结

    Json简介:Json,全名 JavaScript Object Notation,是一种轻量级的数据交换格式.Json最广泛的应用是作为AJAX中web服务器和客户端的通讯的数据格式.现在也常用于h ...

  3. Filter过滤的2种方式

    1.新建一个过滤器,继承ActionFilterAttribute,然后重写 public class DemoFilterAttribute:ActionFilterAttribute { //在A ...

  4. jquery判断起止时间大小和非空

    //时间判断 function CheckDate() { var startTime = $('#txtTime').val(); //获取当前日期 var start = new Date(sta ...

  5. mysql++的release版本当机的问题

    今天用mysql++的release写例子,总是当机,仔细查了一下,发现在编mysqlpp库的时候,代码生成设置成了MDD,改成MD就好了.

  6. swift 实现复制粘贴功能。

    let past = UIPasteboard.generalPasteboard() past.string = pasteboardStr // pasteboardStr就是你要复制的字符串 S ...

  7. Java判断访问设备为手机、微信、PC工具类

    package com.lwj.util; import javax.servlet.http.HttpServletRequest; /** * 判断访问设备为PC或者手机--工具类 * * @de ...

  8. css美化checkbox radio样式

    /*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...

  9. JAVA线程锁lock下Condition高级使用-多个Condition的整合使用

    import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...

  10. .Net最佳实践3：使用性能计数器收集性能数据

    本文值得阅读吗? 本文讨论我们如何使用性能计数器从应用程序收集数据.我们将先了解的基本知识,然后我们将看到一个简单的示例,我们将从中收集一些性能数据. 介绍: - 我的应用程序的性能是最好的,像火箭 ...