谈谈行内元素和块元素的区别和居中问题

最新推荐文章于 2023-09-01 16:17:16 发布

敲代码的猫

最新推荐文章于 2023-09-01 16:17:16 发布

阅读量1k

点赞数

分类专栏： HTML CSS 文章标签：行内元素和块级元素区别行内元素居中块元素居中

本文链接：https://blog.csdn.net/lazycode_cat/article/details/61916642

版权

CSS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 1 订阅

订阅专栏

行内元素，也叫内联元素、内嵌元素等，是众多的行内元素能在一行中显示的元素。行内元素的主要作用是用来添加特殊样式，如元素，元素，元素，，下标 上标等等。

块元素，就是会独占一行的元素，比如<h1></h1>，等等。

行内元素和块元素的区别如下：

	行内元素	块级元素
默认开始位置	和其他元素都在一行上	总是在新行上开始
宽度	宽度就是它的文字或图片的宽度，不可改变	宽度缺省是它的容器的100%，除非设定一个宽度。
高度	高，行高及外边距和内边距不可改变	高度，行高以及外边距和内边距都可控制
padding、margin设置	水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。	可以设置
display	incline	block
容纳的元素	内联元素只能容纳文本或者其他内联元素	它可以容纳内联元素和其他块元素
转换	display:block变成行内元素,或者将display:inline-block变成行内块元素	display:inline变成行内元素，或者将display:inline-block变成行内块元素

怎么设置行内元素和块元素的居中方式？

1）行内元素水平居中：

以div为例，要让div里面的文字水平居中，可以设置text-align:center;。

2）行内元素垂直居中：

以div为例，要让div里面的文字垂直居中，可以同时设置height和line-height值相等即可，如：div{height:30px; line-height:30px}

3）块元素水平居中：

以div为例，要让div里面的p水平居中，需要同时设置p的宽度和margin:0 auto;

如：div p{margin:0 auto; width:500px}

注意此处的块级元素p一定要设置宽度

4）块元素垂直居中：

以div为例，要让div里面的p垂直居中，需要同时设置p的宽度和margin-top值;

下面是对div中的p元素作水平居中和垂直居中案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width:500px;border:1px solid black;height:500px;} /*DIV父容器设置宽度*/
        div p{margin:200px auto; width:100px;height:100px; border:1px solid red;} /*块级元素p也可以加个宽度，
  </style>
</head>
<body>
<div>
    <p>这是P</p>
</div>
</body>
</html>

敲代码的猫

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
谈谈行内元素和块元素的区别和居中问题

行内元素，也叫内联元素、内嵌元素等，是众多的行内元素能在一行中显示的元素。行内元素的主要作用是用来添加特殊样式，如元素，元素，元素，，下标上标等等。块元素，就是会独占一行的元素，比如，等等。行内元素和块元素的区别如下：行内元素块级元素默认开始位置和其他元素都在一行上总是在新行上开始宽度宽度就是它的
复制链接

扫一扫