css行内元素和块元素

最新推荐文章于 2024-07-17 15:18:35 发布

姜无忧

最新推荐文章于 2024-07-17 15:18:35 发布

阅读量370

点赞数

分类专栏： html/css/css3

本文链接：https://blog.csdn.net/xiasohuai/article/details/84986500

版权

html/css/css3 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

一.块级元素和内联元素的区别：

1.块元素，总是在新行上开始；内联元素，和其他元素在一行；
2.块元素，能容纳其他块元素或者内联元素；内联元素，只能容纳文本或其他内联元素；
3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。
4.对于行内元素来说margin只有margin-left和margin-right有效，padding只有padding-left和padding-right有效

二.各自的特点：

1.块元素的特点：

总是在新行上开始；
高度、行高以及外边距和内边距都可控制；
宽度默认是它容器的100%，除非设定一个宽度；
他可以容纳内联元素和其他块元素。

2.内联元素的特点：

和其他元素都在同一行；
高，行高及外边距和内边距不可改变；
宽度就是它的文字和图片的宽度，不可改变；
内联元素只能容纳文本或者其他内联元素。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
span{	
	 height: 100px;
	 background-color: pink;
	 line-height: 100px; 
}
</style>
<body>
	<span>1111</span>
</body>
</html>