Remove padding/margin between elements in shrink-to-fit container - css

Question

I want the yellow div to just be tall enough and only reach the very bottom part of the letter g.
After adding a list it seems to not work despite having 0 padding or margin and displaying as an inline-block.
Also there shouldn’t be a gap between the green list and ‘get a quote’ orange section.
To summarise, I want to get rid of the yellow (well still be there but behind the other colours), and shift the green up to be just under the orange.
#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;
}
<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>

Answer 1

Add a margin reset to remove unwanted gaps between elements. Something like this: * {margin:0}. This rule resets the margins applied by the browser to all properties. Or you could simply target the ul with ul.footer {margin:0}.
Then add padding-top: 10px to the ul to compensate for the padding-bottom: 10px on the f1 above. OR, add display: block to the f1.
The reason the padding-bottom on the f1 doesn't simply push down the ul is because the f1 is a custom element. As such, it has no basic styles applied by the browser and CSS properties fallback to initial values. The initial value of the display property is inline.
An inline box cannot grow in height. Hence, the padding-bottom:10px simply overlaps the line box, intruding into the element below. By changing the display to block, the f1 will act like a normal block element and push away the ul.
* { 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;
}
<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>
More information: Proper way to apply CSS to HTML5 custom elements

Answer 2

This is a quick resolution using margin changes to remove the yellow space like you asked. Remember you can inspect elements and see where space is being created by highlighting the element's markup then viewing the diagram shown normally on the bottom left of the window.
#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;
}
<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>

Answer 3

<ul> have default margins (20px on top and bottom), you should add margin: 0; to your ul.footer styles to remove the extra yellow created by the margins.

Answer 4

You have no margin in your ul.footer..
First Option.. You can just do margin:0px; in your ul.footer.
Second Option.. You can take out the yellow background, and do margin-top:-10px; in your ul.footer.
(Not the actual negative number.. That is just guesstimating.)
Either one works, but the first option is easiest and less painful.