Menu
I'm hoping there's a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers). I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine. When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do. The problem is that the second element still has the 50px left margin, so the elements don't appear centered. I could add JavaScript to detect when the container height changes (i.e. the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?
Here's my code, simplified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/YRshx/
383
Some examples of inline elements are <span> , <strong>, and <img> tags. When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.
`margin:auto;` doesn't work on inline-block elements.
You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .
Based on bastianonm's solution, try this:
<div id="wrapper" style="text-align: center; margin:0 -25px;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
http://jsfiddle.net/YRshx/6/
123
Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.
Fidlle: http://jsfiddle.net/xKVG3/
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper {
border:2px solid black;
animation: 4s linear 0s infinite alternate wide;
}
@keyframes wide {
from { width: 490px; }
to { width: 430px; }
}<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>You could do something similar to:
@media screen and (max-width: 453px){
#elem2 { margin-left:0 !important; }
}
http://jsfiddle.net/YRshx/3/
2
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
