Jump to content

margin-right (and left?) not going to 0 when set to 0px


NewKid1nTown

Recommended Posts

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 by NewKid1nTown
Link to comment
Share on other sites

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

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

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 by DarkxPunk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...