---
title: 内联元素类型及特性
date:  2022-01-09 00:08:36
tags:
- CSS
categories: CSS
author: Anges黎梦
---
## 内联元素特性

内联元素，也可以称为行内元素，布局中常用的标签如：a、span等等都是内联元素，它们在布局中的行为： 

- 不支持宽、高、margin上下、padding上下 
- 宽高由内容决定 
- 盒子并在一行 
- 代码换行，盒子之间会产生间距 
- 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 

## 解决内联元素间隙的方法 

1、去掉内联元素之间的换行 

2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 

## 其他内联元素 

1、\<em\> 标签 行内元素，表示语气中的强调词 

2、\<i\> 标签 行内元素，表示专业词汇 

3、\<b\> 标签 行内元素，表示文档中的关键字或者产品名 

4、\<strong\> 标签 行内元素，表示非常重要的内容 

## 包含默认样式的内联元素 

- a标签：含有的下划线以及文字颜色 

- em、i标签：文字默认为斜体 

- b、strong标签：文字默认加粗 

**实际开发中，对这些标签进行样式重置。**

```css
/* 去掉a标签默认的下划线 */ 
a{ 
    text-decoration:none; 
}
/* 去掉标签默认的文字倾斜 */ 
em,i{
    font-style:normal; 
}
/* 去掉标签默认的文字加粗(按实际需求) */ 
b,strong{ 
    font-weight:normal; 
}
```

内联元素布局实例

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/html/bottom_menu.jpg)