css世界之display

最新推荐文章于 2023-07-24 11:52:16 发布

世纪殇

最新推荐文章于 2023-07-24 11:52:16 发布

阅读量106

点赞数

分类专栏：网页

本文链接：https://blog.csdn.net/dasgk/article/details/103060995

版权

网页专栏收录该内容

7 篇文章 0 订阅

订阅专栏

block：块级元素，独占一行具有width，height属性，无论width设置的值是什么，另一个块级元素都会换行显示
inline：内联元素，可与其他内联元素在同一行显示，只有一行显示不下时才会换行，在设置padding的时候，css显示会生效，但是不影响其他元素，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果，注意元素范围是增大了，但是对元素周围的内容是没影响的。水平方向的设置是可以起作用的
inline-block：外部表现为inline对象，可以与其他元素一行显示。但是具有block的宽高属性。使其既具有block的宽度高度特性又具有inline的同行特性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				list-style:none;
				border:0;
			}
			.a1{
				background:pink;
				margin-top:30px;
				margin-bottom: 30px;
				padding-top: 20px;
				padding-bottom: 20px;
				display: inline-block; #或者去掉看下效果
			}
			.div1{
				width: 100px;
				height:100px;
				background:green;
			}
		</style>
	</head>
	<body>
		<a class="a1">CSDN</a>
		<span> this is test</span>
		<div class="div1"></div>
	</body>
</html>