盒子内外间距 -*统配符-盒子居中auto应用--盒子合并-塌陷问题

最新推荐文章于 2025-04-30 01:11:37 发布

小木木傻

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量116

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/mumushaya/article/details/109838558

版权

边框border
外边距margin
内边距padding
内容content

/边框:border:边框的粗细边框颜色边框样式;
solid:实线;
dashed:虚线;
dotted:点线/

/*padding-left: 10px;
padding-bottom: 20px;
padding-right: 10px;
padding-top: 20px;
padding：内边距上右下左顺时针旋转 */

padding：内边距
/三个值:上右/左下;
两个值:上/下左/右;
一个值:上/下/左/右/
四个值：上右下左
padding: 20px 10px 20px ;

margin：外边距
/三个值:上右/左下;
两个值:上/下左/右;
一个值:上/下/左/右/
四个值：上右下左
padding: 20px 10px 20px ;

/网页中所有外边距内边距都为0/
*{
margin: 0px;
padding: 0px;
}

/盒子水平居中:左右外边距设置为auto. 前提有:width/
margin: 0px auto;

#dd1{background: red;
margin: 50px;}
/给两个盒子加margin外边距,垂直方向外边距取最大值/
#dd2{background: green;
margin: 30px;}

		<!--塌陷解决方法：
		1,border：1px solid  red	
		2,overflow:hidden-->
		<div class="no">
			<div class="iu"></div>

	
			.no{background: red;
			width: 200px;
			height: 200px;
			margin: 50px;
			overflow ：hidden；}
			.iu{background: green;
			width: 50px;
			height: 50px;
			margin: 20px;}

合并的解决方法：只给一个盒子外边距