Espaçamento entre os "SPOILERS"

Detalhes da questão

Endereço do fórum: https://lostscavenge.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Olá, gostaria de saber se é possível ajustar melhor a posição do botão de SPOILER, como é possível ver na imagem, ele está um pouco pra direita, e o espaçamento acima e abaixo é muito grande, gostaria de saber se tem como diminuir este espaço e ajusta-lo na bem à esquerda, se for possível agradeço a ajuda desde já.

IMAGEM:
https://i.imgur.com/WCFngb1.png

LINK DO TÓPICO DE TESTE:
https://lostscavenge.forumeiros.com/t232-teste#501

ATUAL CÓDIGO DOS BOTÕES:

Código:


        .codebox
        {
          background: #FCFCFC;
          border: 1px solid #E3E3E3;
          font-size: 11px;
          line-height: 170%;
          overflow: auto;
          padding: 5px;
        }
        .codebox dd
        {
          background-color: transparent;
          margin: .3em;
          padding: .3em;
        }
        .codebox dt
        {
          border-bottom: 0;
        }
        .codebox.spoiler dt
        {
          background: #ECECEC url(http://i.imgur.com/psvFIEG.png) repeat-x 0 0;
          border: 1px solid #D0D0D0;
          border-radius: 2px;
          box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
          color: #616161;
          cursor: pointer;
          display: inline-block;
          font-size: 11px;
          height: 24px;
          line-height: 24px;
          margin: 0 0 0 5px;
          moz-border-radius: 2px;
          moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
          padding: 0 10px;
          text-shadow: #fff 0 1px 0;
          webkit-border-radius: 2px;
          webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0 1px 0;
          white-space: nowrap;
        }
        .codebox.spoiler dt:hover
        {
          background-color: #F8F8F8;
          color: #4C4C4C;
        }
        .codebox.spoiler
        {
          background: transparent;
          border: 0;
        }
        .codebox.spoiler dd
        {
          background: transparent;
        }
        .spoiler_content.hidden
        {
          background: #FCFCFC;
          border: 1px dashed #E3E3E3;
          padding: 5px;
        }
        .postmain blockquote
        {
          background: #FCFCFC;
          border: 1px solid #E3E3E3;
          color: #9F9F9F;
          font-size: 12px;
          margin-bottom: 5px;
          padding: 10px;
        }


Olá @ApolloCoder,

Altere o seu código para:

Código:

.codebox {
  background: #FCFCFC;
  border: 1px solid #E3E3E3;
  font-size: 11px;
  line-height: 170%;
  overflow: auto;
  margin-left: 0px!important;
  padding: 0px!important;
}
 
.codebox dd {
 background-color: transparent;
 margin: .3em;
 padding: .3em;
}
 
.codebox dt {
 border-bottom: 0;
}
 
.codebox.spoiler dt {
 background: #ECECEC url(https://i.imgur.com/psvFIEG.png) repeat-x 0 0;
 border: 1px solid #D0D0D0;
 border-radius: 2px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 color: #616161;
 cursor: pointer;
 display: inline-block;
 font-size: 11px;
 height: 24px;
 line-height: 24px;
 margin: 0 0 0 5px;
 moz-border-radius: 2px;
 moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 padding: 0 10px;
 text-shadow: #fff 0 1px 0;
 webkit-border-radius: 2px;
 webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 white-space: nowrap;
}
 
.codebox.spoiler dt:hover {
 background-color: #F8F8F8;
 color: #4C4C4C;
}
 
.codebox.spoiler {
 background: transparent;
 border: 0;
}
 
.codebox.spoiler dd {
 background: transparent;
}
 
.spoiler_content.hidden {
 background: #FCFCFC;
 border: 1px dashed #E3E3E3;
 padding: 5px;
}
 
.postmain blockquote {
 background: #FCFCFC;
 border: 1px solid #E3E3E3;
 color: #9F9F9F;
 font-size: 12px;
 margin-bottom: 5px;
 padding: 10px;
}

Atenciosamente,
pedxz.

Olá novamente pedxz, ficou perfeito, porém agora aparece uma barra de rolagem na extrema-direita, é possível remove-la? ou ela é uma consequência da diminuição dos espaçamentos?

IMAGEM: https://i.imgur.com/XlaolbC.png

Altere para:

Código:

.codebox {
  background: #FCFCFC;
  border: 1px solid #E3E3E3;
  font-size: 11px;
  line-height: 170%;
  overflow: hidden!important;
  margin-left: 0px!important;
  padding: 0px!important;
}
 
.codebox dd {
 background-color: transparent;
 margin: .3em;
 padding: .3em;
}
 
.codebox dt {
 border-bottom: 0;
}
 
.codebox.spoiler dt {
 background: #ECECEC url(https://i.imgur.com/psvFIEG.png) repeat-x 0 0;
 border: 1px solid #D0D0D0;
 border-radius: 2px;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 color: #616161;
 cursor: pointer;
 display: inline-block;
 font-size: 11px;
 height: 24px;
 line-height: 24px;
 margin: 0 0 0 5px;
 moz-border-radius: 2px;
 moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 padding: 0 10px;
 text-shadow: #fff 0 1px 0;
 webkit-border-radius: 2px;
 webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0 1px 0;
 white-space: nowrap;
}
 
.codebox.spoiler dt:hover {
 background-color: #F8F8F8;
 color: #4C4C4C;
}
 
.codebox.spoiler {
 background: transparent;
 border: 0;
}
 
.codebox.spoiler dd {
 background: transparent;
}
 
.spoiler_content.hidden {
 background: #FCFCFC;
 border: 1px dashed #E3E3E3;
 padding: 5px;
}
 
.postmain blockquote {
 background: #FCFCFC;
 border: 1px solid #E3E3E3;
 color: #9F9F9F;
 font-size: 12px;
 margin-bottom: 5px;
 padding: 10px;
}

Muito obrigado, ficou perfeito, agradeço a ajuda.