浅谈内联元素inline

今天主要对inline元素做一下归纳总结。

inline是display中的默认属性值，就是将元素设置为内联元素，设置完后元素前后都没有换行符，因此内联元素与前后的元素在一行上。

关于内联元素的特点归纳如下：

1、内联元素中只能容纳其他内联元素或文本。内联元素的高度和宽度由元素中的内容所决定：当元素中存在文本时，其高度由文本的字体大小所决定，宽度由文本内容的长短决定。

当然，关于高度，行高line-height也可以设置内联元素的高度。

除此之外，如果仅仅对内联元素设置高度height和width，是不起作用的。

代码如下：

<head><style>div{width: 100px;height: 100px;background-color: red;      border: 1px solid black;display:inline;}
</style>
</head><body><div>12345</div></body>

最终在界面上显示的效果如下图1所示：

图1

上述代码中可以看到，我们对div设置了宽度width和高度height，但其呈现在界面上的宽度最终由内容长度决定，高度由其内部的内容“123”决定。

如果对line-height进行更改：

<head><style>div{width: 100px;height: 100px;background-color: red;      line-height: 50px;border: 1px solid black;display:inline;}
</style>
</head><body><div>12345</div></body>

那么加入line-height后的效果如下图2所示：

图2

由div距离页面顶部的空白可以看出，内联元素div的高度的确更改了。

2、margin对于内联元素的影响应分为替换元素（replaced element）和非替换元素（non-replaced element）来讨论。

在HTML中，替换元素：作为其他内容占位符的一个元素，比如img和input；

非替换元素：内容包含在文档中的元素，比如div等，内容都放在本身之中。

1）左右外边距margin-left和margin-right不管是否为替换元素，都是有效的；

2）对于行内非替换元素（例如div）来说，margin不会改变其行高line-height。因此，margin不能改变内联元素的margin-top和margin-bottom：

代码如下：

<head><style>#div1{background-color: red;      border: 1px solid black;display: inline; margin: 100px;}#div2{width: 100px;height: 100px;background-color: green;}
</style>
</head><body><div id="div1">12345</div><div id="div2"></div></body>

设置margin后在页面上的展示效果如下图3所示：

图3

由上图可以看到，margin-left已经起到作用，以下方长宽皆为100px的正方形div为参照物，内联元素div1距离左边距为100px，但是上下的外边距均未发生改变。

3）对于行内替换元素来说，由于margin外边距可以改变其行高line-height，所以margin-top和margin-bottom都有效。此处就不做代码演示了，大家可以使用input或者img元素测试一下。

3、padding对于内联元素的影响也应分为替换元素和非替换元素来讨论。

1）左右内边距padding-left和padding-right，不管元素是否为替换元素，都是有效的；

2）对于非替换元素（例如div）来讲，上下内边距padding-top和padding-bottom是有效可见的，但是需要注意，上下内边距的值不会改变元素的line-height，也就是说，如果该元素外部还有一个父级，padding-top和padding-bottom的增减是可见的，但是不会撑大父级div。

代码如下：

加入内边距padding之前：

<style>#div1{background-color: red;      border: 1px solid black;display: inline;}div{width: 200px;height: 200px;background-color: green;border: 1px solid black;}
</style><body><div></div><div><div id="div1">12345</div></div><div></div></body>

其效果如下图4所示：

图4

如果在上述代码块中，在div1的样式中插入：padding:60px; 则效果变成如下图5：

图5

通过上图5可以看到，padding值是可见的，上下左右均增加了60px，但是并没有撑大父级div的大小。

3）对于替换元素来讲，上下内边距padding-top和padding-bottom是有效可见的，且会撑大父级，此处就不做代码演示了。（在父级没有设置样式的情况下。如果父级元素指定了宽和高，那么无论如果都不会撑大父级元素）

转载于:https://www.cnblogs.com/May-study/p/6164150.html

浅谈内联元素inline相关推荐

常见的内联元素(inline)和块级元素(block)
1.内联元素(inline): a – 锚点 abbr – 缩写 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候 ...
浅谈块级元素和内联元素的嵌套规则
1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素. a) 替换元素替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容. 例如浏览器会根据<img> ...
css 内联元素、块级元素、内联块级元素
对于display我想很多人都不陌生,然而在谈到内联元素,行内元素等词,还是会有人脑袋瓜子充满了疑问???我曾经自以为已经了解并懂得如何使用display,在学习vertical-align及替换元素 ...
Html 内联元素、外联元素和可变元素
块元素(block element)一般是其他元素的容器元素块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比 ...
内联元素与块级元素及内外边距的影响
内联元素与块级元素块级元素(block): 新行开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100% 可以嵌套内联元素和其他块元素常用的块级元素:div.h1~h6.dl. ...
块级元素与行级元素（内联元素）
内联元素(inline element)一般都是基于语义级(semantic)的基本元素.内联元素只能容纳文本或者其他内联元素,常见内联元素"a".块元素(block elemen ...
CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客简介本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
html中块级元素并列,HTML的块级元素和内联元素
一.任何不是块级元素的可见元素都是内联元素## 块元素(block element) * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir ...

浅谈内联元素inline

浅谈内联元素inline相关推荐

最新文章

热门文章