locked
Unexpected Margins in Controls RRS feed

  • Question

  • User482190417 posted

    I'm learning now asp.Net so probably is my fault. I have some buttons with no margin in the preview and margins 0px in CSS, but I have like 2px of lateral margin in each button and I don't know how to remove them. Could you help me?

    Monday, November 23, 2020 9:33 PM

Answers

  • User482190417 posted

    Hi MrDog49,

    Accroding to your codes, my summary is as follows:

    1.Remove the space:

       You need to remove the css of margin: 2px 0px 0px 2px; And then you have to remove the line feed,or use this trick :

    <button ... /><!-- 
    [newline here] --><button... />

    2.I suggest you could remove some different settings for the same property.

    Accroding to your codes,I have created a test.Just like this:

    <style>
            .round_button {
                border: none;
                color: white;
                padding: 0px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 0px;
                background-color: #de9eaf;
                height: 50px;
                width: 50px;
                border-radius: 50%;
            }
    
                .round_button:disabled {
                    background-color: #e7c1cc;
                }
    
                .round_button:hover:enabled {
                    background-color: #bb7389;
                }
        </style>
    
    
         <asp:Button ID="btnMC" runat="server" Text="MC" Enabled="False" ToolTip="Cancella la memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMR" runat="server" Text="MR" Enabled="False" ToolTip="Richiamo memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMPlus" runat="server" Text="M+" ToolTip="Aggiunta alla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMMinus" runat="server" Text="M-" ToolTip="Sottrazione dalla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMStore" runat="server" Text="MS" ToolTip="Salvataggio in memoria" CssClass="round_button" />
            <br />

    Result:

    Best regards,

    Yijing Sun

    Thank you so much, it worked perfectly.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 24, 2020 7:23 AM

All replies

  • User475983607 posted

    I'm learning now asp.Net so probably is my fault. I have some buttons with no margin in the preview and margins 0px in CSS, but I have like 2px of lateral margin in each button and I don't know how to remove them. Could you help me?

    Are you sure it a margin and not padding?  Do you have any code to share that illustrates the issue?

    Monday, November 23, 2020 9:37 PM
  • User482190417 posted

    Are you sure it a margin and not padding?  Do you have any code to share that illustrates the issue?

    As I said I'm learning now so I'm not sure about nothing....

    For example I have this in the Default.aspx


                <asp:Button ID="btnMC" runat="server" Text="MC" WOnClick="btnMC_Click" Enabled="False" ToolTip="Cancella la memoria" CssClass="round_button"/>
                <asp:Button ID="btnMR" runat="server"  Text="MR"  OnClick="btnMR_Click" Enabled="False" ToolTip="Richiamo memoria" CssClass="round_button"/>
                <asp:Button ID="btnMPlus" runat="server" Text="M+"  OnClick="btnMPlus_Click" ToolTip="Aggiunta alla memoria" CssClass="round_button"/>
                <asp:Button ID="btnMMinus" runat="server" Text="M-" OnClick="btnMMinus_Click" ToolTip="Sottrazione dalla memoria" CssClass="round_button"/>
                <asp:Button ID="btnMStore" runat="server"  Text="MS"  OnClick="btnMStore_Click" ToolTip="Salvataggio in memoria" CssClass="round_button"/>
                <br />

    and this is the round_button Class

    .round_button {
        display: inline;
        border: none;
        color: white;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 0px;
        background-color: #de9eaf;
        height: 50px;
        width: 50px;
        margin: 2px 0px 0px 2px;
        border-radius: 50%;
    }
        .round_button:disabled {
            background-color: #e7c1cc;
        }
        .round_button:hover:enabled {
            background-color: #bb7389;
        }

    this is the sreenshot: https://drive.google.com/file/d/1ycaAgmrDaVmTj8lSYCTGQMRtpywCIKdH/view?usp=sharing

    Monday, November 23, 2020 9:47 PM
  • User475983607 posted

    Your code specifically sets the margins.

    margin: 2px 0px 0px 2px;

    Change to 

    margin: 0px 0px 0px 0px;

    and remove 

    margin: 0px;

    There is still a space between the button because the button are on separate lines.  Just remove the space.

    <asp:Button ID="Button1" runat="server" Text="Button" /><asp:Button ID="Button2" runat="server" Text="Button" />

    Monday, November 23, 2020 10:11 PM
  • User-474980206 posted

    the markup:

      margin: 2px 0px 0px 2px;

    set left margin to 2px;

    Monday, November 23, 2020 10:28 PM
  • User1535942433 posted

    Hi MrDog49,

    Accroding to your codes, my summary is as follows:

    1.Remove the space:

       You need to remove the css of margin: 2px 0px 0px 2px; And then you have to remove the line feed,or use this trick :

    <button ... /><!-- 
    [newline here] --><button... />

    2.I suggest you could remove some different settings for the same property.

    Accroding to your codes,I have created a test.Just like this:

    <style>
            .round_button {
                border: none;
                color: white;
                padding: 0px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 0px;
                background-color: #de9eaf;
                height: 50px;
                width: 50px;
                border-radius: 50%;
            }
    
                .round_button:disabled {
                    background-color: #e7c1cc;
                }
    
                .round_button:hover:enabled {
                    background-color: #bb7389;
                }
        </style>
    
    
         <asp:Button ID="btnMC" runat="server" Text="MC" Enabled="False" ToolTip="Cancella la memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMR" runat="server" Text="MR" Enabled="False" ToolTip="Richiamo memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMPlus" runat="server" Text="M+" ToolTip="Aggiunta alla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMMinus" runat="server" Text="M-" ToolTip="Sottrazione dalla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMStore" runat="server" Text="MS" ToolTip="Salvataggio in memoria" CssClass="round_button" />
            <br />

    Result:

    Best regards,

    Yijing Sun

    Tuesday, November 24, 2020 2:18 AM
  • User482190417 posted

    Hi MrDog49,

    Accroding to your codes, my summary is as follows:

    1.Remove the space:

       You need to remove the css of margin: 2px 0px 0px 2px; And then you have to remove the line feed,or use this trick :

    <button ... /><!-- 
    [newline here] --><button... />

    2.I suggest you could remove some different settings for the same property.

    Accroding to your codes,I have created a test.Just like this:

    <style>
            .round_button {
                border: none;
                color: white;
                padding: 0px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 0px;
                background-color: #de9eaf;
                height: 50px;
                width: 50px;
                border-radius: 50%;
            }
    
                .round_button:disabled {
                    background-color: #e7c1cc;
                }
    
                .round_button:hover:enabled {
                    background-color: #bb7389;
                }
        </style>
    
    
         <asp:Button ID="btnMC" runat="server" Text="MC" Enabled="False" ToolTip="Cancella la memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMR" runat="server" Text="MR" Enabled="False" ToolTip="Richiamo memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMPlus" runat="server" Text="M+" ToolTip="Aggiunta alla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMMinus" runat="server" Text="M-" ToolTip="Sottrazione dalla memoria" CssClass="round_button" /><!--
            --><asp:Button ID="btnMStore" runat="server" Text="MS" ToolTip="Salvataggio in memoria" CssClass="round_button" />
            <br />

    Result:

    Best regards,

    Yijing Sun

    Thank you so much, it worked perfectly.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 24, 2020 7:23 AM
  • User1535942433 posted

    Hi MrDog49,

    If you have other problems ,you could post your codes to us.If you have solved,you could mark these answers which helpful to you.

    Best regards,

    Yijing Sun

    Tuesday, November 24, 2020 8:25 AM
  • User303363814 posted

    Not answering your question directly, but teach a man to fish ....

    Getting to know how to use the Page Inspector in your browser is a very useful skill.  If you are looking at a page which does not display the way you want it to the press F12 to open the DevTools.  The 'Elements' tab will show you the structure of the page.  There is generally a button at the start of the menu bar which lets you select an element on your page by clicking on it.

    Once you have selected the element that you are interested in the right hand panel of the 'Elements' tab shows you all the css properties being set on the element.  The Computed tab shows you which properties are being overridden and the definition of the winning style, there is even a graphic of the box model for the element.

    There is an enormous amount of debugging information available.  Start by playing around or maybe at Chrome DevTools  |  Google Developers (if you have a Chromium based browser, it wouldn't be difficult to find the equivalent for whichever browser you are using)

    Tuesday, November 24, 2020 10:15 PM