HTML中的内联元素外边据

最新推荐文章于 2024-03-31 19:45:48 发布

xvzhengyang

最新推荐文章于 2024-03-31 19:45:48 发布

阅读量366

点赞数

分类专栏： html css 文章标签： html css 内联元素外边据

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86408019

版权

css 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

看下面的效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>span</title>
		<!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 -->
		<!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加
		 内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间
		 .你也可以对内联元素上的上边和下边增加内边距,不过这个内边距不会影响包围她的其他内联元素的间距,所以内边距会与其他内联元素重叠-->
		 <style type="text/css">
			 html,body{
				 padding: 0px;
				 margin: 0px;
			 }
		 	div{
				height: 10000px;
				width: 1000px;
				background-color: yellow;
			}
			span{
				background-color: blue;
				margin-top: 30px;
				width: 10px;
				height: 100px;
				margin-left: 40px;
				/* 外边距:上下空间没有增加 */
				/* margin-left: 50px; */
				/* 左右空间增加 */
				/* padding-left: 50px; */
				padding-top: 300px;
				padding-bottom: 300px;
				/* padding-right: 50px; */
			}
			p{
				height: 50px;
				width: 50px;
				background-color: red;
				margin-top: 100px;
			}
		 </style>
	</head>
	<body>
		<div>
			<a href="">
				<em>这个是强调,你懂得</em>
				<span>2我是span,我看下我的宽度 高度 内外边距什么是否可以设置</span>
				</a>
			<!-- 可以看到在对这些元素定位之前,设置宽度和高度是没有效果的 -->
			<!-- 可以看到,虽然设置了span的上和下内边距,不过这个内边距不会影响包围它的其他内联元素的间距
			例如本例子中的em元素的间距没有受到span的影响
			,所以内边距会与其他内联元素重叠 -->
			<p ></p>
		</div>
	</body>
</html>

xvzhengyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML中的内联元素外边据

&lt;!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 --&gt; &lt;!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间 .你也可以对内联...
复制链接

扫一扫