XF 1.5 Spacing between banners

[Exemption]

My EXTRA.CSS

.message .messageUserBlock .userBanner {
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin: 0 auto;
background-image: none;
}
.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.userBanner.Administrator {
background: #FF2322;
color: white;
}

.userBanner.Donator {
background: #4D87C1;
color: white;
}

.userBanner.Moderator {
background: #277700;
color: white;
}

.userBanner.Staff {
background: lightgreen;
color: white;
}
.message .messageUserBlock .userBanner {
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin: 0 auto;
font-size: 12px;
font-weight: 1px/bold;
padding: 4px 6px;
background-image: none;
}

.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.messageUserBlock .userText {
background-color: rgb(249, 249, 249);
}

 

[Paul B]

Add margin-bottom to .message .messageUserBlock .userBanner.

 

[Exemption]

Add margin-bottom to .message .messageUserBlock .userBanner.

And I did that but that didnt work

.message .messageUserBlock .userBanner {
border-radius: 4px;
margin-bottom: 15px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin: 0 auto;
background-image: none;
}
.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.userBanner.Administrator {
background: #FF2322;
color: white;
}

.userBanner.Donator {
background: #4D87C1;
color: white;
}

.userBanner.Moderator {
background: #277700;
color: white;
}

.userBanner.Staff {
background: lightgreen;
color: white;
}
.message .messageUserBlock .userBanner {
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin: 0 auto;
font-size: 12px;
font-weight: 1px/bold;
padding: 4px 6px;
background-image: none;
}

.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.messageUserBlock .userText {
background-color: rgb(249, 249, 249);
}

 

[Amaury]

You have two instances of .message .messageUserBlock .userBanner, and one of them already has margin: 0 auto. That's likely overwriting your margin-bottom.

 

[Exemption]

You have two instances of .message .messageUserBlock .userBanner, and one of them already has margin: 0 auto. That's likely overwriting your margin-bottom.

Hmm well when I remove the margin: 0 auto and out margin: 5px it does this

.message .messageUserBlock .userBanner {
border-radius: 4px;
margin-bottom: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
margin-bottom: 5px;
background-image: none;
}
.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.userBanner.Administrator {
background: #FF2322;
color: white;
}

.userBanner.Donator {
background: #4D87C1;
color: white;
}

.userBanner.Moderator {
background: #277700;
color: white;
}

.userBanner.Staff {
background: lightgreen;
color: white;
}
.message .messageUserBlock .userBanner {
border-radius: 2px;
box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
font-size: 12px;
font-weight: 1px/bold;
padding: 4px 6px;
background-image: none;
}

.message .messageUserInfo .userBanner.wrapped span {
display: none;
}

.messageUserBlock .userText {
background-color: rgb(249, 249, 249);
}

 

[Paul B]

It nay be worth reading up on CSS so you can see how to combine margin 0 auto with margin bottom 5px.

CSS Margin