My main (colored in skyblue) element appears to be taking up more width than its child elements take up. It’s display is set to inline-block which makes me curious why it’s width isn’t automatically set to auto. The immediate child elements have a display of inline-block as well but their width’s combined = less than 100% width. What’s going on here? How can I fix this and make the main element only take up as much space as it needs and not the whole 100% width?
/* ///////////////////////////////// IMPORTS /////////////////////////////// */
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
/* ///////////////////////////////// INITIAL /////////////////////////////// */
* {
box-sizing: border-box;
}
body {
background-color: red;
text-align: center;
}
main {
display: inline-block;
width: 90%;
background-color: skyblue;
text-align: left;
}
main p {
margin: 0;
padding: 10px;
color: #bbb;
font-size: 0.9rem;
}
a {
color: #fff;
text-decoration: none;
}
a[href="#"] {
display: inline-block;
width: 25%;
margin: 2.2%;
background-color: #f1f1f1;
vertical-align: top;
}
img {
max-width:100%;
}<html>
<body> <!-- red -->
<main> <!-- skyblue -->
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>mmm random text caption.</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Is that a sheep or a goat?</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>A ram maybe? Is that wood tiling behind it?</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Definitly an animal on grass...on wood</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Umm. k.</p>
</a>
</main>
</body>
</html>Edit: I thought it might be main { width: 90%; } but this seems to force main to take up 100% of the width. Making the issue worse.
Edit 2: I could use flexbox or floats but I’m also curious as to is this standard inline-block behavior? Usually (in my experience) inline-block styled elements have a width of auto and adjust to the size of their content. Not being any larger than they need.
3
Whenever the contents of an inline-block wrap, even once, it will take up the entire available width.
As for the desired behavior, I suppose you are looking for this: …?
* {
box-sizing: border-box;
}
body {
background-color: red;
text-align: center;
}
main {
display: inline-block;
margin: 5vw;
background-color: skyblue;
text-align: left;
padding: .8rem;
overflow: hidden;
}
main p {
margin: 0;
padding: 10px;
color: #bbb;
font-size: 0.9rem;
}
a {
color: #fff;
text-decoration: none;
}
a[href="#"] {
display: inline-block;
width: calc(33.3333% - 1.6rem);
margin: .8rem;
background-color: #f1f1f1;
vertical-align: top;
box-sizing: border-box;
float: left;
}
img {
max-width:100%;
}<link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet"/>
<main> <!-- skyblue -->
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>mmm random text caption.</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Is that a sheep or a goat?</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>A ram maybe? Is that wood tiling behind it?</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Definitly an animal on grass...on wood</p>
</a>
<a href="#">
<div><img src="https://i.imgur.com/7WBWShL.jpg" alt=""></div>
<p>Umm. k.</p>
</a>
</main>Besides changing margins into rem from %, there is one other change I made to your original code and you might want to understand why:
Normally, you would think having
display:inline-block;
width:25%;
margin: 0;
box-sizing: border-box;
on children should make them wrap in lines of 4, right?
But most often they do not. Here’s why: picture them as big letters in a line of text. Markup has line breaks and elements are placed on next row, for readability. Those line breaks and the tabs at the start of new lines are reduced by the browser into a single space character. And those space chars are not accounted for in CSS. The options are:
a) to suppress the spaces between inline-block elements using html comment blocks:
<parent><!--
--><child></child><!--
--><child></child><!--
--><child></child><!--
--><child></child><!--
--><child></child><!--
--></parent>
This will work, they will be 4/row, no extra spaces added. Or…
b) use float:left on the children. If you also want the parent to expand its height (background) to include all the floating children, you should set overflow:hidden on it. Which is what I used in the above example and is the typical solution for floating inline containers.
2
Remove width of main and give fixed width to your child elements not %. Then you will get what you need.
You can’t do it by giving % width to both parent and child element.
main {
display: inline-block;
/*width: 90%;*/
background-color: skyblue;
text-align: left;
}
a[href="#"] {
width: 200px;
}
You can use flexbox to resolve the issue of the extra blank space on the right hand side.
Simply change the style of .main:
main {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width: 90%;
background-color: skyblue;
text-align: left;
}
JsFiddle: https://jsfiddle.net/rgbxr0sx/
3