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?
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?
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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)
None
0 Points
3 Posts
Unexpected Margins in Controls
Nov 23, 2020 09:33 PM|MrDog49|LINK
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?
All-Star
52101 Points
23232 Posts
Re: Unexpected Margins in Controls
Nov 23, 2020 09:37 PM|mgebhard|LINK
Are you sure it a margin and not padding? Do you have any code to share that illustrates the issue?
None
0 Points
3 Posts
Re: Unexpected Margins in Controls
Nov 23, 2020 09:47 PM|MrDog49|LINK
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
All-Star
52101 Points
23232 Posts
Re: Unexpected Margins in Controls
Nov 23, 2020 10:11 PM|mgebhard|LINK
Your code specifically sets the margins.
Change to
and remove
There is still a space between the button because the button are on separate lines. Just remove the space.
All-Star
57864 Points
15488 Posts
Re: Unexpected Margins in Controls
Nov 23, 2020 10:28 PM|bruce (sqlwork.com)|LINK
the markup:
margin: 2px 0px 0px 2px;
set left margin to 2px;
Contributor
3380 Points
1281 Posts
Re: Unexpected Margins in Controls
Nov 24, 2020 02:18 AM|yij sun|LINK
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 :
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
None
0 Points
3 Posts
Re: Unexpected Margins in Controls
Nov 24, 2020 07:23 AM|MrDog49|LINK
Thank you so much, it worked perfectly.
Contributor
3380 Points
1281 Posts
Re: Unexpected Margins in Controls
Nov 24, 2020 08:25 AM|yij sun|LINK
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
Participant
1580 Points
906 Posts
Re: Unexpected Margins in Controls
Nov 24, 2020 10:15 PM|PaulTheSmith|LINK
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)