CSS设置padding时，为什么是外面的层height变高，而不是里面的层的height变小<d

发布网友发布时间：2022-04-21 01:22

共2个回答

懂视网时间：2022-04-21 05:44

.archive-header{font-size:12px;background-color:#F7F7F7;padding: 5px 20px;margin-bottom: 1px;overflow:hidden;}.archive-header h1 a{color: #444;float:left;}.archive-header-info{font-size: 12px;color:#999;margin:-4px 0 0;}

原来这这样的，我加了个padding就成下面这样

我加了句

.archive-header p{float:left;padding: 15px 20px;}

原来的代码是这样：

		 			2222
			42342342343

我就是想让后面的副标题，垂直居中对齐，请教大神应该怎么改？

回复讨论(解决方案)

.archive-header p{padding: 15px 20px;}

是你用了浮动的原因

你可以如下控制，这里面牵涉到默认样式重置的问题，h1，p都有自带的margin,另外文字垂直居中可以拿行高来控制

无标题文档 			2222
			42342342343

你可以如下控制，这里面牵涉到默认样式重置的问题，h1，p都有自带的margin,另外文字垂直居中可以拿行高来控制

无标题文档 			2222
			42342342343

谢谢，淫才，哈哈

热心网友时间：2022-04-21 02:52

你这个是盒子模型的定义没有理解清楚，盒子模型(margin border padding content)里面的层设置的高度已定，即content高度已定，而盒子其他的项没有设值，外面的层高度也已经定了，即里面的content已设置高度，后又加上了padding的值，所以盒子的高度又增加了

CSS设置padding时，为什么是外面的层height变高，而不是里面的层的height变小&lt;d

回复讨论(解决方案)

CSS设置padding时，为什么是外面的层height变高，而不是里面的层的height变小<d