In my web application, I have some divs and spans that make table like structure.
the pseudo code is,
<head>
<style>
span{
display:inline-block;
width:auto;
}
.tblbody
{
font-family:'Segoe UI';
font-size:20px;
color:#2A2A2A ;
padding : 0px;
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
padding-left:9px;
}
</style>
</head>
<body>
<div>
<span style="width: 240px;" class="tblbody">
<span style="width: 240px;" class="tblbody">asia</span></span>
<span><span><br>
<span style="width: 240px;" class="tblbody">india</span></span>
<br><span><br>
<span style="width: 240px;" class="tblbody">china</span</span>
<br><span><br><span style="width: 240px;" class="tblbody">pakisthan</span></span><br><span><br>
<span style="width: 240px;" class="tblbody">bangladesh</span></span><br></span>
</body>
In the first row, the span that contains the continent name is moving downwards leaving space above it.
how can I move the span upwards?
thanx 🙂
Write vertical-align:top to your span. Write like this: