overflow:hidden ignoring bottom padding

Question

In the following example, the bottom padding is ignored, and the text flows to the bottom of the element before hiding. What is causing this?

        
                      

              相关标签:
       
      

Answer 1

wrap the content in a div with a clip property!!

check out heldin's answer @ How can I force overflow: hidden to not use up my padding-right space

Answer 2

The bottom padding exists but the content pushes the bottom padding down and is not visible because of overflow:hidden. What you can do is place the content in a container like so:

<div style="overflow:hidden; width: 300px; height: 200px; border:1px solid #000; ">
    <div style="overflow:hidden; width:auto; height:140px; border:30px solid #ff0000;">
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
    </div>
</div>

You can play with the fiddle here - http://jsfiddle.net/BMZeS/

Hope this helps.

Answer 3

If your CSS uses padding-bottom and overflow:hidden together,it will cause the problem you describe.

The best solution is:

<div style="padding: 50px; border:1px solid #000">
    <div style="overflow: hidden; width: 300px; height: 100px;">
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
        <p>Hello, this is text.</p>
    </div>
</div>

Click here for live demo

Answer 4

Overflow has nothing to do with padding. Padding is more like an "internal border" in this case. If you want the overflow to be hidden, you need to change the actual size of your box, and use a bottom-margin of 0px instead. Overflows will still show up in your padding.

aka:

<div style="overflow: hidden; width: 300px; height: 100px; padding: 50px 50px 0 50px; margin-bottom:0px;">
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
  <p>Hello, this is text.</p>
</div>

Padding and Margins always go like this in CSS: top right bottom left (in that order)

If any value is 0px, you can simply use a zero. like:

padding:0;

or:

padding: 0 10px 0 0;

Any value other than zero must be specified with px, em, or pt.