Bootstrap CSS填充问题

Question

I am trying to make an "Inbox" in bootstrap similar to Gmail's look and feel.

I am having some issues with the Panel that the mail items are in however.

http://jsfiddle.net/64t872o1/

I am having trouble getting rid of this Margin or padding and I cant figure out what it is.

I have set the margins and padding of the panel body to zero but it still remains.

.panel-body{
    padding: 0px;
    padding-bottom: 0px;
    margin-bottom: none;
}

Is there an easy way to figure out where this padding is coming from?

Answer 1

You are seeing the margin that is set on the .list-group element.

Updated Example

.tab-content .list-group {
    margin-bottom: 0;
}

Here is the initial styling set in the main Bootstrap file:

.list-group {
    padding-left: 0;
    margin-bottom: 20px;
}

Answer 2

The best way:

.tab-content .list-group {
    margin-bottom: 0;
}

Answer 3

在你的CSS中添加：

.tab-content .list-group{margin-bottom:0;}

Answer 4

Use this:

.list-group { margin-bottom: 0px; }