How to solve the problem that the height of the outer div is increased after CSS and padding_html/css

How to solve the problem that the height of the outer div is increased after CSS and padding_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:07:22

Original

1612 people have browsed it

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

Copy after login

It turned out to be like this, I added a padding and it became like this

I added a sentence

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

Copy after login

The original code is like this:

		<header class="archive-header"> 			<h1><a href="http://192.168.1.148/?cat=5">2222</a></h1>			<p>42342342343</p></header>

Copy after login

I just want the subtitle at the back to be vertically aligned in the center. Could you please tell me how to change it?

Reply to discussion (solution)

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

Copy after login

The reason is that you used float

You It can be controlled as follows, which involves the issue of resetting the default style. h1 and p have their own margins. In addition, the vertical centering of text can be controlled by line height

<!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>

Copy after login

You can control it as follows, which involves the issue of resetting the default style. h1 and p have their own margins. In addition, the vertical centering of text can be controlled by line height

<!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>

Copy after login

Thanks, you genius, haha