why inline element take width more in html
Question
could you please tell me why inline element take more width
here is my code https://jsbin.com/jawoyutuhi/1/edit?html,output
why it taking this space .
<html>
<style>
.red {
color: red;
}
.mb-0 {
margin-bottom: 0;
}
.inlineBlock {
display:inline-block
}
.customInput {
border: none;
outline: none;
border-bottom: 1px solid black;
width: 100%;
}
.customInputContainer {
font-size: 10px;
padding-top: 4px;
}
.customGridCell {
border: 1px solid black;
height: 25px;
width: 25px;
}
</style>
<head> </head>
<body>
<div style="width: 700px;height: 842px;padding: 15px">
<div>
<div class="customInputContainer inlineBlock">
<div class="inlineBlock red">
<label>
<b>
Mobile Number Alloted
<sup>*</sup>
</b>
</label>
</div>
<div class="inlineBlock" style=" width: 45%;
margin-left: 4px; padding: 0px;
vertical-align: sub;">
<table style="border-spacing: 1px;">
<tr>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
1 answers
solution1
1 2019-07-11 12:33:50
You have a width of 45% in .inlineBlock so that's why the width is not what you are expecting.
You could just remove it and change the width of individual .customGridCell to whatever you want like so :
<html>
<style>
.red {
color: red;
}
.mb-0 {
margin-bottom: 0;
}
.inlineBlock {
display:inline-block
}
.customInput {
border: none;
outline: none;
border-bottom: 1px solid black;
width: 100%;
}
.customInputContainer {
font-size: 10px;
padding-top: 4px;
}
.customGridCell {
border: 1px solid black;
height: 25px;
width: 15px;
}
</style>
<head> </head>
<body>
<div style="width: 700px;height: 842px;padding: 15px">
<div>
<div class="customInputContainer inlineBlock">
<div class="inlineBlock red">
<label>
<b>
Mobile Number Alloted
<sup>*</sup>
</b>
</label>
</div>
<div class="inlineBlock" style="
margin-left: 4px; padding: 0px;
vertical-align: sub;">
<table style="border-spacing: 1px;">
<tr>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
<td class="customGridCell"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I just removed the width specified in .inlineBlock and reduced the width of .customGridcell , you could just put whatever you want it to be.
See JSFiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.