内联块位置不符合预期（CSS）

Question

for a bit of fun I decided to make a sliding shelf today. I got it looking and working how I wanted and then decided to put some content in the cards.

I added text to the first card and it moved down almost on to a new line. I can't explain why this happened (though I'm sure there's a simple explanation). Can one of you tell me what I'm missing, please?

Thank you 🙂

 function hideTrigger() { leftTrig.removeAttribute("hidden"); rightTrig.removeAttribute("hidden"); switch (pos) { case 0: leftTrig.setAttribute("hidden", ""); break; case posMax: rightTrig.setAttribute("hidden", "") } } function moveHelper() { boxesCont.style.transform = slideHelper(), hideTrigger(), setTimeout(function() { end = boxCont[posMax].getBoundingClientRect().left <= window.innerWidth ? 1 : 0 }, 300) } function slideHelper() { return "translate(-" + boxSize * pos + "px)" } function moveRight() { pos < posMax && (end ? endHelper() : (pos++, moveHelper())) } function moveLeft() { pos > 0 && (pos--, moveHelper()) } function moveTo(e) { e >= 0 && e <= posMax && (pos = e, moveHelper()) } function endHelper() { pos++; let edgeDif = boxSize - boxMargin - (window.innerWidth - boxCont[posMax].getBoundingClientRect().left); rightTrig.setAttribute("hidden", ""), boxesCont.style.transform = "translate(-" + (boxSize * (pos - 1) + edgeDif) + "px)" } var leftTrig = document.querySelector(".directional.left"); var rightTrig = document.querySelector(".directional.right"); var boxesCont = document.querySelector(".shelf .boxes"); var boxCont = boxesCont.querySelectorAll(".box"); var boxStyle = boxCont[0].currentStyle || window.getComputedStyle(boxCont[0]); var boxMargin = parseFloat(boxStyle.marginLeft); var boxSize = boxCont[0].offsetWidth + 2 * boxMargin; var end = 0; var pos = 0; var posMax = boxCont.length - 1; leftTrig.addEventListener("click", function() { moveLeft() }); rightTrig.addEventListener("click", function() { moveRight() }); moveHelper(); 

 body { margin: 0; font-family: Roboto; text-align: justify; } .shelf { position: relative; overflow-x: hidden; font-size: 0; } .shelf button.directional { position: absolute; transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1); height: 100%; width: 30px; top: 0; opacity: 0; border: 0; border-radius: 0; background: rgba(55, 71, 79, 0.4); color: #F5F5F5; cursor: pointer; z-index: 9999; } .shelf button.directional.left { left: 0; } .shelf button.directional.right { right: 0; } .boxes { white-space: nowrap; transition: transform 0.3s cubic-bezier(.25, .8, .25, 1); } .box { display: inline-block; border-radius: 2px; height: 200px; width: 350px; margin: 0 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); font-size: 16px; } .box:nth-child(even) { background: #f44336; } .box:nth-child(odd) { background: #2196F3; } .shelf:hover button.directional { opacity: 1; } .shelf:hover button.directional:hover { background: rgba(55, 71, 79, 0.8); } *[hidden] { display: none; } 

 <div class="shelf"> <button class="directional left">&lsaquo;</button> <div class="boxes"> <div class="box">test</div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <button class="directional right">&rsaquo;</button> </div> 

Link to JSFiddle

Answer 1

Add vertical-align: top; to your .box .

This will get your inline block elements to align themselves vertically across their top points.

Answer 2

Problem with inline-block elementsis, most browsers including IE will add 1px around inline and inline-block elements.

https://davidwalsh.name/remove-whitespace-inline-block

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

https://matthewlein.com/articles/inline-block-no-space-font/

https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/

This happens if you stack your inline-block elements. Meaning, in order to keep your code more readible if you put line breaks in html before inline-block elements, you will get this gap and it will cause unwanted UI.

So basically you need to set font-size:0 to wrapper element then set your font-size back to normal in inline-block elements if you have to keep them in separate lines like

<li>Some content<li>
<li>Some content<li>
<li>Some content<li>

or you need to merge them in single line

<li>Some content<li><li>Some content<li><li>Some content<li>