Question

我希望黄色div足够高，只能到达字母g的最底部。

添加列表后，尽管有0填充或边距并显示为内联块，但它似乎无效。

此外，绿色列表与“获取报价”橙色部分之间不应存在差距。

总结一下，我想摆脱黄色（仍然在那里，但在其他颜色的背后），并将绿色移到橙色下面。

＆＃13;

#footer-right {
  float: left;
  width: 360px;
  height: 200px;
  background: #96F;
}
.footer-text-section-wrap {
  background: #ff0;
  width: auto;
  height: auto;
  display: inline-block;
}
f1 {
  color: #333;
  font-weight: 100;
  font-family: verdana, arial, "Times New Roman", Times, serif, georgia, serif, helvetica;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px 0px;
  background: #FCC;
}
ul.footer {
  list-style-type: none;
  padding: 0px;
  color: #666;
  font-weight: 100;
  font-family: verdana, arial, "Times New Roman", Times, serif, georgia, serif, helvetica;
  font-size: 20px;
  background: #0CC;
}

＆＃13;

<div id="footer-right">
  <div class="footer-text-section-wrap">
    <f1>Get a Quote</f1>
    <ul class="footer">
      <li>About</li>
      <li>Contact</li>
      <li>Outsourcing</li>
    </ul>
  </div>
</div>

＆＃13;

Answer 1

<ul>有默认边距（顶部和底部为20px），您应该将margin: 0;添加到ul.footer样式中，以删除边距创建的额外黄色。

Answer 2

这是一个快速解决方案，使用边距更改来删除您提出的黄色空间。请记住，您可以通过突出显示元素的标记然后查看窗口左下角正常显示的图表来检查元素并查看创建空间的位置。

＆＃13;

#footer-right{
	float:left;
	width:360px;
	height:200px;
	background:#96F;
}
.footer-text-section-wrap{
	background:#ff0;
	width:auto;
	height:auto;
	display: inline-block;
}
f1{
	color:#333;
	font-weight:100;
	font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
	font-size:20px;
	border-bottom:1px solid #ccc;
	padding:0 0 10px 0px;
  margin: 0 0 10px 0px;
	background:#FCC;
}
ul.footer {
  list-style-type:none;
  padding: 0px;
  margin: 10px 0 0 0; /*This is all that I added or changed*/
  color:#666;
  font-weight:100;
  font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
  font-size:20px;
  background:#0CC;
}

＆＃13;

<div id="footer-right">
<div class="footer-text-section-wrap">
<f1>Get a Quote</f1>
<ul class="footer">
  <li>About</li>
  <li>Contact</li>
  <li>Outsourcing</li>
</ul>
</div>
</div>

＆＃13;

Answer 3

添加边距重置以消除元素之间不需要的间隙。这样的事情：* {margin:0}。此规则将浏览器应用的边距重置为所有属性。或者您只需将ul定位到ul.footer {margin:0}。

然后将padding-top: 10px添加到ul以补偿上面padding-bottom: 10px上的f1。或者，将display: block添加到f1。

padding-bottom上的f1并不是简单地按下ul的原因是因为f1是自定义元素。因此，它没有浏览器应用的基本样式和CSS属性回退到初始值。 The initial value of the display property is inline.

内联框的高度不能增长。因此，padding-bottom:10px只是重叠线框，侵入下面的元素。通过将display更改为block，f1将像普通的块元素一样，并推开ul。

＆＃13;

* { margin: 0; }
f1 { display: block; }

#footer-right {
  float: left;
  width: 360px;
  height: 200px;
  background: #96F;
}

.footer-text-section-wrap {
  background: #ff0;
  width: auto;
  height: auto;
  display: inline-block;
}

f1 {
  color: #333;
  font-weight: 100;
  font-family: verdana, arial, "Times New Roman", Times;
  font-size: 20px;
  border-bottom: 1px solid #ccc;
  padding: 0 0 10px 0px;
  background: #FCC;
}

ul.footer {
  padding: 0;
  list-style-type: none;
  color: #666;
  font-weight: 100;
  font-family: verdana, arial, "Times New Roman", Times;
  font-size: 20px;
  background: #0CC;
}

＆＃13;

<div id="footer-right">
  <div class="footer-text-section-wrap">
    <f1>Get a Quote</f1>
    <ul class="footer">
      <li>About</li>
      <li>Contact</li>
      <li>Outsourcing</li>
    </ul>
  </div>
</div>

＆＃13;

更多信息：Proper way to apply CSS to HTML5 custom elements

Answer 4

你的ul.footer没有保证金..

第一个选项..你可以做保证金：0px;在你的ul.footer。

第二个选项..你可以取出黄色背景，并做边缘顶部：-10px;在你的ul.footer。（不是实际的负数。那只是猜测。）

任何一个都有效，但第一个选项最容易，也不那么痛苦。

删除收缩容器

4 个答案: