NewKid1nTown Posted January 13, 2017 Share Posted January 13, 2017 (edited) Please try this code. <!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 50px; border: 25px solid green; padding: 10px; margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px; } </style> </head> <body> <h2>Testing Margins</h2> <div style="display:inline-block;">Box 1</div> <div style="display:inline-block;">Box 2</div> <br /> <div style="display:inline-block;">Box 3</div> <div style="display:inline-block;">Box 4</div> </body> </html> Then try it with all four margins set to 0px. Does the left and right margins completely disappear. For me, I still see some margin on the left and right. How can I get the left and the right margins to completely disappear? Edited January 13, 2017 by NewKid1nTown Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2017 Share Posted January 13, 2017 The body element has a margin by default, and that is the margin you are probably seeing, not the div margin. Link to comment Share on other sites More sharing options...
NewKid1nTown Posted January 13, 2017 Author Share Posted January 13, 2017 Are you saying that after running my code? I'm not sure if you saw what I described, if I understand what you are saying correctly. Please run the code and edit my code so that there aren't any white spaces in between the 4 boxes that are laid out in a 2 x 2 formation. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2017 Share Posted January 13, 2017 Now you have supplied code I can tell you that, that issue is to do with using display: inline-block; because with each div stacked as it is, it is treated as a line break which when shown shows as a space the size of current font size. One option is to set the parent container font-size to zero, then reset the font-size of div containers to required size. Link to comment Share on other sites More sharing options...
NewKid1nTown Posted January 13, 2017 Author Share Posted January 13, 2017 I think this is the fix you are suggesting. Makes sense now. <!DOCTYPE html> <html> <head> <style> #boxstyle { background-color: lightgrey; width: 50px; border: 25px solid green; padding: 10px; margin-right: 0px; margin-left: 0px; margin-top: 0px; margin-bottom: 0px; font-size: 10px; } #divstyle { font-size: 0px; } </style> </head> <body> <div id="divstyle"> <div id="boxstyle" style="display:inline-block;">Box 1</div> <div id="boxstyle" style="display:inline-block;">Box 2</div> <br /> <div id="boxstyle" style="display:inline-block;">Box 3</div> <div id="boxstyle" style="display:inline-block;">Box 4</div> </div> </body> </html> Link to comment Share on other sites More sharing options...
DarkxPunk Posted January 16, 2017 Share Posted January 16, 2017 (edited) Your solution works, however that is not exactly what he was saying. The problem with using inline-block is that when the HTML is parsed it sees the line breaks (aka when you press enter to make a new line). This line break is parsed when using inline-block thus creating a space (that space being the line break). An even easier way to solve it without having to play around in CSS is simply remove the line break. <!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; width: 50px; border: 25px solid green; padding: 10px; } </style> </head> <body> <h2>Testing Margins</h2> <div style="display:inline-block;">Box 1</div><div style="display:inline-block;">Box 2</div> <br /> <div style="display:inline-block;">Box 3</div><div style="display:inline-block;">Box 4</div> </body> </html> You can also comment out the line break. Edited January 16, 2017 by DarkxPunk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now