CSS样式中padding和margin的区别和使用

最新推荐文章于 2022-06-02 18:31:52 发布

baijing-hu

最新推荐文章于 2022-06-02 18:31:52 发布

阅读量133

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43285445/article/details/110288052

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			b,span,h1,h2{
				border: 1px solid red;	
			}
			/*margin:用于设置外边距，同级标签间的间距
			 如果是在垂直方向，会选择两个标签中最大的那个边距，也就是说会进行合并
			 如果在水平方向则会叠加不同框之间的边距 
			 * */
			h1{
				margin-bottom:100px ;
			}
			h2{
				margin-top: 20px;
			}
			b{
				margin-right: 10px;
			}
			span{
				margin-left: 10px;
				/*
				 * 行内元素对于bottom和top元素无效，需要将元素转换为块元素和行块元素并存
				 * margin：50px；上下左右
				 * maigin：50px 50px； 上下  左右
				 * margin：50px 50px 50px；上  左右  下
				 * maigin：50px 50px 50px 50px；上  右 下 左
				 */
				/*
				 padding：内边距
				 与maigin功能相反，他用来确定内部元素距离边框的间距
				 
				 */
			}
		</style>
	</head>
	<body>
		<h1>河南工业大学</h1>
		<h2>郑州大学</h2>
		<b>河南省郑州市</b> <span>山西省</span>
	</body>
</html>

baijing-hu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式中padding和margin的区别和使用

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style > b,span,h1,h2{ border: 1px solid red; } /*margin:用于设置外边距，同级标签间的间距如果是在垂直方向，会选择两个标签中最大的那个边距，也就是说会进行合并如果在水平方.
复制链接

扫一扫