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
- WBOYOriginal
- 2016-06-24 12:07:221590browse
.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;} 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;} 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>
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;} 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> 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> Thanks, you genius, haha
Statement：
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