CSS基础：margin使用&margin居中&margin边框合并

最新推荐文章于 2023-07-01 19:59:15 发布

渣猫略懂

最新推荐文章于 2023-07-01 19:59:15 发布

阅读量414

点赞数

分类专栏：前端基础文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120635722

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				border: 3px dotted #0000FF;
			}
			#div4{
				height: 100px;
				width: 100px;
				border: 3px double #A52A2A;
			}
			#div1{
				padding: 0px;
				margin: 10px;
				/* margin连写：（与padding相同）
				 写四个分别表示上、右、下、左
				 写三个表示上、左右、下 
				 写两个表示上下、左右
				 写一个表示上下左右*/
			}
			#div2{
				/* auto：自适应。只针对块级元素 */
				margin:auto;
				margin-left: auto;
				margin-right: auto;
				/* 同时设置outo将左右都自动分配会形成左右居中 
				因为页面左右剩余空间是可以确认的，所以左右可以自动分配
				页面上下无法确认，纵向不生效，确定纵向距离也不生效 */
				margin-left: auto;
				margin-right: auto;
			}
			#div4{
				/* 块级元素在另一个块级左右居中,前提是有剩余空间 */
				margin: 0 auto;
				/* 文本在行内元素或行内块级元素中横向居中 */
				text-align: center;
				line-height: 100px;
			}
			#div5{
				/* 边框合并 */
				/* 两个相邻边框都会展示，也就是两条线紧挨着展示，看起来像线条加粗
				 可以让其中一个margin的值为负数，使边框移动至两条线重合达到边框合并的目的*/
				 margin-top: -3px;
			}
			#div6,#div7{
				/* 注意：左右边框合并时值不一定，需要根据实际情况测量
				可以达到相同效果，但不属于边框合并，可能导致在不同用户端显示效果不同 */
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3">
			<div id="div4">德玛西亚</div>
		</div>
		<div id="div5"></div>
		<div id="div6"></div>
		<div id="div7"></div>
	</body>
</html>