(Resolvido) Margem em Span

ClaudioX · Novembro 9, 2010

Olá pessoal,

Estou com um problema aparentemente simples, alguém pode me ajudar!? pliz ^^

Fiz uma estrutura de span pra ser tipo tabela, mas a propriedade margin não funciona (em cima e à baixo), aí não consigo dar espaçamento entre os spans. A segunda linha dos span fica também fica um pouco mais a esquerda: sem a aparecer borda do primeiro elemento..

Tem algum erro aí?

<tr>
    <td>oi</td>
    <td>
    <div style="margin: 2px;">
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>        
    </div>
   </td>
</tr>

Vlw, t+

_Vinny_ · Novembro 9, 2010

ClaudioX, eu testei aqui o seu código e aparece normal todas as bordas. Testando em FF 3.6, GC 7 e IE7.

Qual o seu navegador?

ClaudioX · Novembro 9, 2010

Uso Opera, mas você viu certo por uma falha minha (enquanto testava), retirei uma propriedade ("width:400px" na div):

Original bugado (full pra ajuda a ver):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
            <title>teste</title>
<body>
<table>
<tr>
    <td>oi</td>
    <td>
    <div style="width:400px;margin: 2px;">
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
<span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;margin:2px;white-space: nowrap;">O MEU TExTO</span>          
    </div> 
   </td>
</tr>
</table>
    </body>
</html>

Aí consigui arrumar (4h depois ^^")... mas não achava que devia dar esse problema, se você ou alguém sober o porque acontece isso, seria muito bom, o conserto pode parecer gambiarra. display:block;float:left;

<tr>
    <td>oi</td>
    <td>
    <div style="width:400px;margin: 2px;">
        <span style="border: 1px solid;display:block;float:left;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;display:block;float:left;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;display:block;float:left;margin:2px;white-space: nowrap;">O MEU TExTO</span>
        <span style="border: 1px solid;display:block;float:left;margin:2px;white-space: nowrap;">O MEU TExTO</span>        
    </div>
   </td>
</tr>

Editado Novembro 9, 2010 por ClaudioX

_Vinny_ · Novembro 9, 2010

No que você postou que estava com "bug", bastava adicionar um line-height para criar um espaçamento entre as linhas.

ClaudioX · Novembro 10, 2010

Vinny tu é monstro! finalmente vi a utilização do line-height, mas tipow, você viu aí a falta de borda a partir da 2º linha das span? (parece que fica desalinhado..)

Só por curiosidade coloquei um printscreen a respeito

Pra mim ta de boa por enquanto, to me virando com o display block ^^

Abração, e obrigado denovo!

Vlw

_Vinny_ · Novembro 10, 2010

Bom, como ainda tem duvidas, desmarquei como resolvido.

Quanto ao desalinhamento, aqui aparece normal o alinhamento, veja:

ClaudioX · Novembro 10, 2010

Rapaaaz, então deve ser alguma coisa por aqui, kkkk, mas pode marcar como resolvido!

Foi só pra tirar dúvida... vlw mesmo!

_Vinny_ · Novembro 10, 2010

Tudo certo.

Bom, não custa verificar em outros navegadores ou ver se tem coisa errada no seu código, como um comando CSS a mais ou algo do tipo. Qualquer coisa, estamos ai.

Entrar

(Resolvido) Margem em Span

Pergunta

ClaudioX

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

_Vinny_

Link para o comentário

Compartilhar em outros sites

ClaudioX

Link para o comentário

Compartilhar em outros sites

_Vinny_

Link para o comentário

Compartilhar em outros sites

ClaudioX

Link para o comentário

Compartilhar em outros sites

_Vinny_

Link para o comentário

Compartilhar em outros sites

ClaudioX

Link para o comentário

Compartilhar em outros sites

_Vinny_

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades