Home > Web Front-end > HTML Tutorial > How to solve the problem that the height of the outer div is increased after CSS and padding_html/css_WEB-ITnose

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
1593 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
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
Copy after login



Thanks, you genius, haha

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template