margin/padding使用注意事项

最新推荐文章于 2022-01-08 12:59:20 发布

资本理念

最新推荐文章于 2022-01-08 12:59:20 发布

阅读量422

点赞数

分类专栏： web前端笔记总结

本文链接：https://blog.csdn.net/qq_43151638/article/details/102697547

版权

web前端笔记总结专栏收录该内容

78 篇文章 1 订阅

订阅专栏

能用padding就不用margin

<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	span{
		margin-left: 50px;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	a{
		margin-top: 30px;
	}
	tr,tbody{
		padding: 20px;
	}
	.box1{
		width: 200px;
		height: 200px;
		background: green;
		margin-bottom: 50px;
	}
	.box2{
		width: 200px;
		height: 200px;
		background: green;
		margin-top: 50px;				
	}
	.box{
		width: 200px;
		height: 200px;
		background: #008000;
		padding-left: 30px;	/* 只能设置背景的颜色和背景图片,margin不能 */
	}
	</style>
</head>
<body>
	<script type="text/javascript">
		tr,tbody:在表格中设置padding无效果
		padding:
			只能设置背景的颜色和背景图片,margin不能
		margin:
			1.在行内标签中,上下margin无效
				解决方法:1)加浮动,
							脱离文档流需要考虑的问题,当盒子够大会在同一行,减小盒宽
							清除给下面标签的浮动影响clear
						2)display更改标签类型为块级或者行列块
			2.在块级标签里,使用上下margin,上下margin会重合
				解决方法:1)加浮动					
			3.如果第一个子标签使用了margin-top,子标签会把margin传递给父级,父级会撑开
	</script>
	<div class="box">可靠可爱可以可算</div>
	<table border="0" cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<td>张三</td>
				<td>女</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
			</tr>				
		</tbody>
	</table>
	<span>span的margin列举</span><!-- 行列标签 -->
	<a href="#">超链接的margin列举</a>
	<div class="box1"></div>
	<div class="box2"></div>
</body>

资本理念

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
margin/padding使用注意事项

能用padding就不用margin<style> *{ margin: 0px; padding: 0px; } span{ margin-left: 50px; margin-top: 50px; margin-bottom: 20px; } a{ margin-top: 30px; } tr,tbody{ padding: 20px;...
复制链接

扫一扫