2

    #myid{
        border:1px solid black;
    }
    
    #myid code {
        border:1px solid black;
     font-size: 1.5em;
     line-height: 3em;
     vertical-align:top;
    }
    <main>
     <p id="myid">trying to understand <code>vertical-align</code> better.</p>
    </main>

Why does the code box not align to the top of the surrounding p box?

Talha Abrar
  • 880
  • 8
  • 22
user3182532
  • 1,097
  • 5
  • 22
  • 37
  • https://stackoverflow.com/questions/35529582/vertical-align-not-working-on-inline-block – Tschitsch Jul 24 '17 at 08:13
  • I still don't understand: according to your link, vertical-align affects the content/text inside my code tags, right? but If I change the alignment from top to bottom, the only thing that moves is the text inside the surrounding p tags. That is so confusing and doesn't make any sense? – user3182532 Jul 24 '17 at 08:30

2 Answers2

1

The first problem is that you have given line-height of 3em to code tag, that is unnecessary, i have edited your code, see below

HTML

<main>
    <p id="myid">trying to understand <code>vertical-align</code> better.</p>
</main>

CSS

#myid{
    border:1px solid black;
    padding: 20px;
    line-height: 100%;
}

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:top;
}

here is a fiddle for you

Talha Abrar
  • 880
  • 8
  • 22
  • I've understood now how line-height works and that it is a problem in this example, thanks. I really don't understand why the people who made up that example in order to explain vertical-align put that line-height there. That totally messes things up. HOWEVER I don't understand why changing the vertical-align from "top" to "bottom" in my original example changes the position of the text inside the surrounding p box? – user3182532 Jul 24 '17 at 08:39
  • vertical align is used to align element inside a container, and in your case, text inside main has normal line height except text inside code tag, that is why when you use align bottom, all text is align to bottom of their parent container except code text, because it has 3 times higher line-height than other text – Talha Abrar Jul 24 '17 at 08:43
  • "vertical align is used to align element inside a container" -> so why doesn't that option only affect the text inside the code box? I expect the text inside the code box (which I have surrounded with a black line) to be aligned to the top/bottom 1px black line? – user3182532 Jul 24 '17 at 08:52
  • due to this line of css `line-height: 3em;` – Talha Abrar Jul 24 '17 at 08:55
  • even if I take away the line-height, changing the vertical-align value still changes the position of the text that is out of its scope (the text inside p tag, not inside code tag). and I don't understand why that is – user3182532 Jul 24 '17 at 12:07
0

Make like this and it works:

#myid{
    border:1px solid black;
}

Adding unique css selector 

#myid code {
    border:1px solid black;
    font-size: 1.5em;
    vertical-align:super;
}
Ravi Ubana
  • 397
  • 5
  • 26
Carnaru Valentin
  • 1,690
  • 17
  • 27