NewKid1nTown
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by NewKid1nTown
-
-
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.
-
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?
margin-right (and left?) not going to 0 when set to 0px
in CSS
Posted
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>