block、inline-block、inline的区别

最新推荐文章于 2024-03-21 15:00:00 发布

墨墨博客

最新推荐文章于 2024-03-21 15:00:00 发布

阅读量307

点赞数

分类专栏： css3 html5 文章标签： css html

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/53191411

版权

css3 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

html5

30 篇文章 1 订阅

订阅专栏

1、display:block是指该元素变为块级元素，独占一行，可以设置height、width属性，也可以设置margin、padding属性

2、display：inline是指该元素变为行内元素，会和其他相邻行内元素在同一行，直到本行满了会换下一行，宽度随元素的内容变化，设置height、width属性无效，水平方向的margin和padding设置有效，垂直方向margin和padding设置无效。

3、display：inline-block是指元素具有inline的行内元素特性和block的高度宽度特性，也就是可以设置height、width属性和margin、padding属性。

eg:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>11</title> 
	<style>
		.e{
			width:500px;
			height:400px;
			background-color:grey;
		}
		.d{
			width:100px;
			height:100px;
			background-color:red;
			display:inline-block;
			margin-top:50px;
			padding-top:50px;
		}
	</style>
</head>
<body>

<div class="e">
	<div class="d"> 54546</div>
	<div class="d">defedggr</div>
</div>

</body>
</html>