I'm adding a span to wrap a certain part of text so that I can apply a specific font to it, but for some reason it drops below so that part of it is under the baseline of the paragraph that contains all the text.Anyone have any ideas on how to move it ( the span ) up so that it is on the same line as the rest of the text?I'm trying relative positioning, but I'm wondering if there is a better way.Here is the code:\[code\]<!Doctype HTML><html lang="en"> <head> <meta charset="utf-8" /> <style type="text/css"> html, body{ margin:0; padding:0; font-size:16px; } .container{ height:342px; width:100%; padding-top:2em; padding-left:2em; background:#ffffff; background:rgb(255, 255, 255); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; color:#333333; color:rgb(51, 51, 51); font-family:'Trend'; font-size:120%; font-size:1.2rem; *behavior:url(../scripts/boxsizing.htc); } #welcome{ background:#8cc047; background:rgb(140, 192, 71); } #welcome p.title{ margin:0; font-size:225%; font-size:2.25rem; } #name{ position:relative; font-family:'Cubano-web',Cubano,'Trend'; left:16px; top:-7.1px; } </style> </head> <body> <header class="container" id="welcome"> <p class="title">Hello,</p> <p class="title">I'm <span id="name">Noah</span>—</p> </header> </body></html>\[/code\]
span causes content inside to be lower?
- Thread starter LeMo
- Start date