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

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>

score 2 · Answer 1 · edited May 23 '17 at 12:08

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

score 1 · Answer 2 · answered Jan 04 '17 at 20:07

1

<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.

answered Jan 04 '17 at 20:07

zgood

12,181
2
25
26

that almost solves it, but now the 'about' text invades the orange space as there is 10px padding-bottom and a 1px border bottom on the f1 font – user3760941 Jan 04 '17 at 20:13
1
@user3760941 That is because the `
– zgood Jan 04 '17 at 20:21
Margins collapse in certain cases. Padding does not. The overlap is actually happening because the `f1` is a custom element and its `display` property is set to `inline`. I've explained in my answer. – Michael Benjamin Jan 05 '17 at 00:07

score 1 · Accepted Answer · answered Jan 04 '17 at 20:13

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>

Bottom right of the window when inspecting... Sorry – Frank DiCaprio Jan 04 '17 at 20:14 — Frank DiCaprio, Jan 04 '17 at 20:14

score 1 · Answer 4 · answered Jan 04 '17 at 20:25

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.

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

4 Answers4

Linked