CSS Margem não funciona quando utilizado o writing-mode

On For All · 28 de dezembro de 2020

Olá, não estou conseguindo achar o problema ou erro, porque quando utilizo o 'writing-mode' no meu código o 'margin' não funciona. O meu projeto necessita de que eu utilize o meu texto na vertical, mas não consigo encontrar outra forma de deixar o texto verticalizado sem o 'writing-mode'.

#page-index header .linksdois{
    font-family: 'Roboto', sans-serif;
  /* o que está causando o problema */
    writing-mode: vertical-lr;
  /*----------*/
    margin-top: 170px;
    margin-left: 1280px;
    margin-bottom: 0px;
    margin-right:  5px;
    font-size: 16px;
    transform: rotateZ(180deg);
}

#page-index header .linksdois a{
    color: var(--font-color);
    transition: 400ms;
 /* parte que não funciona */
    margin-left: 18px;
  
}

Resumindo eu necessito deixar meu texto verticalizado, porém quando uso o 'writhing-mode' no consigo aplicar a margem ao texto.

Desde já agradeço.

GabrielSennaMs · 28 de dezembro de 2020

@On For All Bom amigo a propriedade "writing-mode" não impossibilita o uso da propriedade "margin-left", provavelmente tem alguma outro coisa que está fazendo isso.

Para que eu possa te ajudar você vai ter que postar o resto do seu css e o seu html.

On For All · 29 de dezembro de 2020

Olá amigo, eu tinha em mente que o writing-mode era o responsável pois quando o retiro eu consigo utilizar o margin-left normalmente.

Codigo CSS

:root{
    --font-color: #b4b4b4;
}

a {
    text-decoration: none;
}

#page-index {
    background-image: radial-gradient( circle, #ffffff 38%, #eefafb);
    background-size: 100% 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

#page-index header .logo span{
    background-image: url(/public/img/logomarca.png);
    background-size: 100% 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 60px;
}

#page-index header .links {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-left: 100px;
    margin-top: 20px;
}

#page-index header .links a{
    color: var(--font-color);
    margin-left: 16px;
    transition: 200ms;
}

#page-index header .links a:hover{
    color: #ffa561;
}

#page-index header .linksdois{
    font-family: 'Roboto', sans-serif;
    writing-mode: vertical-lr;
    margin-top: 170px;
    margin-left: 1280px;
    margin-bottom: 0px;
    margin-right:  5px;
    font-size: 16px;
    transform: rotateZ(180deg);
}

#page-index header .linksdois a{
    color: var(--font-color);
    transition: 400ms;
    margin-left: 18px;
}

#page-index header .linksdois a:hover{
    color: rgb(26, 26, 26);
}

Código HTML

<!DOCTYPE html>
<html lang="pt_br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/page-index.css">
</head>
<body>
    <div id="page-index">
        <header>
            <div class="logo">

                <span></span>

            </div>

            <div class="links">

                <a href="#">About</a>
                <a href="#">Portifolio</a>
                <a href="#">Blog</a>
                <a href="#">Contact</a>

            </div>

            <div class="linksdois">

                <a class="twiter" href="#">twiter</a>
                <a class="beahance" href="#">beahance </a>
                <a class="dribbble" href="#">dribbble </a>
                <a class="linkedin" href="#">linkedin</a>

            </div>

        </header>
        <main>
          <div class=title> <p> About <p> </div>
        </main>
    </div>
    
</body>
</html>

Desde já agradeço a ajuda

On For All · 29 de dezembro de 2020

Olá amigo eu pesquisei um pouco mais afundo e comparando os códigos de outras pessoas, descobri o problema meu, o meu diretório estava errado então a propriedade não estava sendo aplicada.

Agradeço a sua ajuda.