css行内元素有哪些？css块级元素和行内元素的区别-css教程-PHP中文网

首页

web前端

css教程

css行内元素有哪些？css块级元素和行内元素的区别

不言

Sep 04, 2018 pm 04:11 PM

css 块级元素行内元素

很多css初学者在学习到css行内元素和css块级元素的时候，可能会容易搞混，那么，本篇文章就来给大家讲解一下css行内元素和块级元素有哪些？以及css块级元素和css行内元素的区别。

在上一篇文章css块级元素的定义是什么？css块级元素有哪些？中我们单独介绍css的块级（block）元素，所以在这里就不多说了~下面我们就来直接讲解一下css行内元素。

css行内元素（inline element）

css行内元素也叫内联元素，行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，常见内联元素 “a”。比如 SPAN 元素，IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素，各个字母之间横向排列，到最右端自动折行。

css行内元素的特点：

1、可以和其他元素处于一行，不用必须另起一行。

2、元素的高度、宽度及顶部和底部边距不可设置。

3、元素的宽度就是它包含的文字、图片的宽度，不可改变。

在介绍完css行内元素后，我们来看一看css行内元素有哪些？

css行内元素有哪些？

常见的css行内元素：

a：锚点
abbr：缩写
acronym：首字
b：粗体(不推荐)
bdo： bidi override
big ：大字体
br ：换行
cite ：引用
code：计算机代码(在引用源码的时候需要)
dfn：定义字段
em ：强调
font ：字体设定(不推荐)
i ：斜体
img ：图片
input ：输入框

kbd：定义键盘文本
label ：表格标签
q ：短引用
s：中划线(不推荐)
samp ：定义范例计算机代码
select ：项目选择
small：小字体文本
span：常用内联容器，定义文本内区块
strike ：中划线
strong：粗体强调
sub：下标
sup ：上标
textarea ：多行文本输入框
tt：电传文本
u：下划线

接着，我们来看一看css块级元素和css行内元素的区别有哪些？

css块级元素和css行内元素的区别

css块级元素和行内元素的区别之一：

块级元素：块级元素会独占一行，默认情况下宽度自动填满其父元素宽度。

行内元素：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

<html>
<head>
    <title>区别</title>
    <style type="text/css">
     .div1{background-color: #090;}
     .span1{background-color: yellow;}
    </style>
</head>
<body>
<div class="div1">块级元素1</div>
<div class="div1">块级元素2</div>
<span class="span1">行级元素1</span>
<span class="span1">行级元素2</span>
</body> 
</html>

登录后复制

效果如下：

2345截图20180904155622.png

css块级元素和行内元素的区别之二：

块级元素：块级元素可以设置宽高。

行内元素：行内元素不可以设置宽高。

实例：

<html>
<head>
    <meta charset="UTF-8">
    <title>区别</title>
    <style type="text/css">
    p{background-color: #098;height: 50px;width: 50%;}
    div{background-color: green;height: 50px;width: 40%;}
    span{background-color: yellow;height: 70px;}
    strong{background-color: pink;height: 70px;}
    </style>
</head>
<body>
        <p>块级元素一</p>
        <div>块级元素二</div>
        <span>行内元素一</span>
        <strong>行内元素二</strong>
</body>
</html>

登录后复制

效果如下：

2345截图20180904160022.png

注意：块级元素即使设置宽度也还是独占一行。

css块级元素和行内元素的区别之三：

块级元素：块级元素可以设置margin，padding。

行内元素：行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果。

实例：

<head>
    <meta charset="UTF-8">
    <title>区别</title>
    <style type="text/css">
    p{background-color: #098;height: 50px;width: 50%;padding: 20px;margin: 20px;}
    div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;}
    span{background-color: yellow;height: 70px;padding: 40px;margin: 20px;}
    strong{background-color: pink;height: 70px;padding: 40px;margin: 20px;}
    </style>
</head>
<body>
        <p>块级元素一</p>
        <div>块级元素二</div>
        <span>行内元素一</span>
        <strong>行内元素二</strong>    
</body>

登录后复制

效果如下：

2345截图20180904154925.png

注意：行内元素竖直方向的如padding-top和margin-bottom不会产生边距效果。

css块级元素和行内元素的区别之四：

块级元素：块级元素对应display:block。

行内元素：行内元素对应display:inline。

最后说一个属性：display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。是一个很实用的属性。

说明：可以通过修改元素的display属性来切换行内元素和块级元素。

文章到这里也就结束了，若是想了解更多的css块级元素和行内元素的区别，可以去php中文网css视频教程栏目看看视频。

热AI工具

热工具

热门话题

Java教程

1655

CakePHP 教程

1414

Laravel 教程

1307

PHP教程

1255

C# 教程

1228

显示更多

Related knowledge

vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。

了解HTML，CSS和JavaScript：初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML，CSS和JavaScript的角色：核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。