关于内联元素的 padding，margin，border 等等，它们并不是没有作用，而是不会影响元素的 line-height，就是说你的上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果。这里我把背景色换成了边框便于观察：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span问题</title>
<style type="text/css">
span{
padding:20px;
color:red;
border:2px solid red;
}
</style>
</head>
<body><p style="width:18em; color:#999;"></p>
</body>
</html>
可以看到 padding 是起作用的，但上下的文字并没有撑开——因为 line-height 没变。文字不够多，所以看不出效果，看起来似乎是 padding 没起作用，其实是 IE 按照 line-height 把多于的 padding 给切掉了。
下面的例子在 firefox 和 IE 下比较一下就可以看出为什么了：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>span问题</title>
<style type="text/css">
span{
padding:50px; background-color:#666666; color:#FFFFFF; margin:50px;
}
p{border:1px solid red;}
</style>
</head>
<body>
<p><span>测试span</span>
</p>
</body>
分享到：
相关推荐
### CSS中的Padding与Margin属性详解 #### 一、引言 在前端开发中，CSS（层叠样式表）是用于定义HTML文档外观的核心技术之一。其中，`padding`与`margin`是两个至关重要的属性，它们直接影响着网页元素的空间布局...
一、简介 margin我们一般习惯的叫它外边距，分别可以设置四个方向的外边距，这里不再赘述赋值语法。 实际上，我们通常设置的margin是物理级别的设置，而...1、从内之外content => padding => border => margin 盒
盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距(padding)、边框(border)和外边距(margin)的矩形盒子。理解盒子模型对于网页布局至关重要。 **1. 盒子模型** 1.1 盒子模型的概念 ...
### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成： - **内容（Content）**：这...
每个元素都可以看作是一个矩形的盒子，包括内容区（content）、内边距（padding）、边框（border）和外边距（margin）。在"HTML&CSS 12"中，你可能会遇到如何设置这些属性的实例，以精确控制元素的大小和位置。 在...
盒子模型是 CSS 中的一个重要概念，它是指一个 HTML 元素的样式是由 content area、padding、border 和 margin 四个部分组成的。 五、块状元素和内联元素 块状元素是指可以容纳其他元素的容器，例如 div 和 p，...
例如，可以为父元素设置一个透明的边框（border）或者内边距（padding），这样在视觉上没有影响，但是能够阻止上下的margin合并。或者，将元素设置为浮动（float）或者绝对定位（absolute positioning），也可以避免...
- **在内联元素中使用边界属性**：`margin`在内联元素中的使用情况。 ### 浏览器及兼容问题 - **浏览器介绍**：常见的浏览器及其特点。 - **要兼容哪些浏览器**：针对目标用户群体选择合适的浏览器进行兼容测试。 ...
* CSS盒模型：盒模型、border、padding、margin * CSS边框与背景：边框、背景颜色、背景图片 * CSS表格与列表：表格样式、列表样式 * CSS其他样式：圆角、阴影、透明度 CSS高级 * CSS3前缀和rem：CSS3新特性、rem...
当一个元素使用 `border` 或 `padding` 属性时，在某些情况下，边框或填充与内容之间会出现一个额外的 3 像素间隙。这种现象尤其在元素被设置为 `position: relative` 时更为明显。 **解决方法**： - 使用 `display...
盒模型包括元素的边距（margin）、边框（border）、填充（padding）以及内容（content）区域。了解和掌握盒模型是创建响应式和布局良好的网页的关键。 首先，我们来看两种主要的元素类型：块级元素（block elements...
盒模型包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。其中，内容区域是盒子的中心部分，显示了元素的主要内容，如文本或者图片。内边距位于内容区域的周围，提供了元素内容...
- `margin`和`padding`：设置元素边界的外边距和内边距。 - `border`：设置元素边框的样式、宽度和颜色。 - `text-align`：设置文本的水平对齐方式。 - `float`：设置元素的浮动属性，用于布局。 在实际操作中，...
- CSS 盒子模型包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。理解这个模型对于精确布局至关重要。 - 内容区域包含实际的文本或图像，内边距在内容周围增加额外空间，边框...
内联元素的`margin`会在行内起作用，但`padding`和`border`可能因折行而产生非预期的效果。 了解并熟练运用盒子模型是前端开发中至关重要的一步，它能帮助开发者精确控制元素的尺寸和布局，实现复杂的网页设计。...
盒模型是指 HTML 元素在浏览器中的显示方式，包括 margin、border、padding 和内容区域。浮动是指元素浮动在父元素中，并且不占用父元素的空间。定位是指元素在浏览器中的显示位置，可以是相对定位、绝对定位或固定...
`reset.css`文件的主要目的是消除浏览器内置样式的影响，使网页元素具有统一的初始样式，从而为自定义布局提供更加可靠的起点。 `reset.css`文件包含一系列CSS规则，这些规则针对HTML中的各种元素设置默认值。例如...