Display: inline-block com conteúdo desloca de posição

Olá, Pedro.

A propriedade display é um pouco chata mesmo. Acho que se você ler esses três posts ficará mais claro sobre qual propriedade utilizar e como cada uma funciona (inline, block e inline-block):

• display: inline

• display: block

• display: inline-block

Bem, estudei bastante com relação ao display, muitíssimo obrigado, cada vez mais apaixonado por css.

Acabei escolhendo por não utilizar display, mas é bom saber que eu realmente entendo agora como funciona.

Abraços

Aí sim Pedro. Fico bem feliz que os posts tenham te ajudado :-)

Ah! Fiquei curioso sobre o que você usou para resolver o seu layout? Foi flex, float....?

Inicialmente tinha trocado o display por float, pois meu objetivo era que a "Aba" ficasse ligada ao "container", ambos em um corpo. O container era display e a aba também,, aonde o container tinha um tamanho responsivo o que desencadeou em um grande problema com a animação de deslocamento das abas (Quando estava em px funcionava e quando estava em % o corpo bloqueava o click em outras abas, confuso mas foi mais ou menos isso). Então com o float dando errado bati muito a cabeça e inspecionei muito elemento e por final troquei por position (Tenho mais intimidade com o position), deixando o corpo como "Container", e colocando o container anterior não mais responsável pelo tamanho do corpo e sim pelo conteúdo dentro do corpo, e botando na aba um position absolute e right 0. Como a aba é feita com after e a área na qual ficará o nome da aba ja está com o right negativo eu não precisei repetir o tamanho do right, economizando trabalho e leitura. Coube como uma luva.

Link de exemplo de como está o desenvolvimento: https://image.ibb.co/cLu8K7/Captura_de_Tela_2018_04_16_a_s_11_39_07.png

Novamente, muito obrigado pela ajuda :)

Caramba aí sim Pedro :-)