块级元素和行内元素的区别？行内元素设定margin和padding的区别？

时间：2021-04-17 20:47:40 阅读：19 评论：0 收藏：0 [点我收藏+]

块级元素独占一行，相邻的行内元素可以和排在一行上

块级元素可以设定宽高，行内元素设定宽高无效

块级元素可以设定内边距，上右下左都有效；行内元素可以设定内边距，左右有效，上下设定后会影响background，但是不参与高度计算。

例子：

<!DOCTYPE html>

<head>

<title>Document</title>

* {

margin: 0;

padding: 0;

}

div {

height: 60px;

color: #fff;

background-color: #000;

}

span {

padding: 50px;

background-color: #f00;

}

</style>

</head>

<body>

aaaa<span>555</span>bbbb

</body>

</html>

===============运行效果===============

块级元素可以设定外边距，上右下左都有效；行内元素可以设定外边距，左右有效，上下无效。

块级元素不设定宽度时，其尽量占满父元素的宽度；行内元素的宽度是其内部内容撑起的宽度。

块级元素可以容纳其他块级元素和行内元素；行内元素只能容纳文本或者其他行内元素。

原文：https://www.cnblogs.com/Friday1/p/14670838.html

踩

(0)

评论一句话评论（0）

分享档案

更多>