locked
In HTML, how to add space between two text boxes? RRS feed

  • Question

  • User546194788 posted

    In code below, how to add space between two text boxes?

    <tr>
    <td>
    <asp:TextBox ID="txtFirstName" runat="server" Width="194px">
    </asp:TextBox>
    </td>
    <td>
    <asp:TextBox ID="txtLastName" runat="server" Width="194px">
    </asp:TextBox>
    </td>
    </tr>

    Wednesday, July 17, 2019 12:04 PM

All replies

  • User-1038772411 posted

    Hello, aspfun

    simple code to achive this but i am sharing you links for more ideas and techniques so please refer and try to apply in your code. it will help you

     First Priority ->  https://forums.asp.net/t/2132787.aspx?Reducing+the+space+between+asp+TextBox+form+fields

    Then, below links.

    https://forums.asp.net/t/1601008.aspx?A+simple+way+of+putting+spaces+in+between+textboxes+labels+etc

    https://stackoverflow.com/questions/7199937/how-to-give-a-space-between-label-and-textbox-in-different-td-tag-in-a-row-c-s

    Thanks.

    Wednesday, July 17, 2019 12:17 PM
  • User-719153870 posted

    Hi aspfun,

    There are many ways to add space between two controls in html.

    In addition to the way CSS is used mentioned by AddWeb Solution, you can also try to add styles directly to <td>.

    For example: <td style="width: 250px">.

    Or, you can use '&nbsp;' in html to add spaces directly, but '&nbsp;' way’s spaces are very short and difficult to control the exact length, so this way is not recommended.

    Please refer to below codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                td style
                <table>
                    <tr>
                        <td style="width: 250px">
                            <asp:TextBox ID="txtFirstName" runat="server" Width="194px">
                            </asp:TextBox>
                        </td>
                        <td style="width: 250px">
                            <asp:TextBox ID="txtLastName" runat="server" Width="194px">
                            </asp:TextBox>
                        </td>
    
                    </tr>
                </table>
                nbsp
                <table>
                    <tr>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" Width="194px">
                            </asp:TextBox>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox2" runat="server" Width="194px">
                            </asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
    </html>

    Here's result of both methods:

    Best Regard,

    Yang Shen

    Thursday, July 18, 2019 1:54 AM
  • User-2054057000 posted

    You use margin: left css property:

    <tr>
    <td style="margin-left: 50px">
    <asp:TextBox ID="txtFirstName" runat="server" Width="194px">
    </asp:TextBox>
    </td>
    <td style="margin-left: 50px">
    <asp:TextBox ID="txtLastName" runat="server" Width="194px">
    </asp:TextBox>
    </td>
    </tr>

    Thursday, July 18, 2019 12:29 PM
  • User546194788 posted
    style="margin-left: 50px" is working for me.
    Thank you
    Thursday, July 18, 2019 2:34 PM