我在表格中有一个div,我想坚持表格。我想知道为什么当div有显示块时,背景不会填满div的边框(带背景颜色),而是适合内容。 margin 0,padding 0。 我找到了两个困扰我的解决方案,我不明白:如果我在div中添加可见边框,背景将一直填充到表单中。如果我将div的显示属性更改为内联块,则将div背景填充到顶部。我问的是为什么会发生这种情况,也许是一种更好的解决方法。我是CSS的初学者,谢谢。
_______________________
| form |
|______________________|
----------------------- border of div sticking to form as wanted
unwanted white space between border and content due to color not showing
_______________________
| div content |
| |
|______________________|
div{
background-color: #3B3B3B;
width:652px;
margin:0;
padding:0;
display:block;
}
.formStyle {
width: 652px;
height: 64px;
background: linear-gradient(-15deg, transparent 0%, #3b3b3b 80%), linear-gradient(15deg, transparent 0%, #3b3b3b 80%), linear-gradient(to bottom, #3b3b3b 70%, #000000 90%);
margin:0;
}
请求的HTML:
<form action="" class="formStyle">
<img class="computerImage">
<label>members login:</label>
<input name="Your name" type="text" id="yourname" value="Your name">
<input name="emailid" type="text" id="emailid" value="Email Id">
<input name="" type="submit" class="button" value="GO">
</form>
<div>
<h2>about total management?</h2>
<p>Total Management is a free, tableless, W3C-compliant web design layout by Template World. This template has been
tested and proven compatible with all major browser environments and operating systems. You are free to modify
the design to suit your tastes in any way you like.</p>
<p>We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com
from the footer of the template.</p>
<p class="lasttext">If you are interested in seeing more of our free web template designs feel free to visit our
website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
</div>
</body>
答案 0 :(得分:1)
你的样式表有重置吗?
* {
margin: 0;
padding: 0;
}
即使您的div有margin:0
和padding:0
,它也不适用于p
内的h2
或div
,所以你有空位。