CSS,padding后，外div高度被撑大如何解决-HTML教程-爱易网页

CSS,padding后，外div高度被撑大如何解决

日期：2014-05-16　浏览次数：20747 次

CSS,padding后，外div高度被撑大怎么解决

本帖最后由 wishwolf 于 2014-03-08 15:11:08 编辑

.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;}

原来的代码是这样：

		<header class="archive-header"> 

			<h1><a href="http://192.168.1.148/?cat=5">2222</a></h1>

			<p>42342342343</p>

</header>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

p,h1{margin:0;}

.archive-header{font-size:12px;background-color:#F7F7F7;padding: 5px 20px;height:22px;line-height:22px;}

.archive-header h1 a{color: #444;float:left;}

.archive-header p{float:left;}

</style>

</head>



<body>

<header class="archive-header"> 

			<h1><a href="http://192.168.1.148/?cat=5">2222</a></h1>

			<p>42342342343</p>

</header>



</body>

</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS,padding后，外div高度被撑大如何解决

相关资料更多>

推荐阅读更多>