[{"data":1,"prerenderedAt":74},["ShallowReactive",2],{"/2025/09/18-display-inline-block":3},{"id":4,"title":5,"body":6,"date":65,"description":44,"extension":66,"meta":67,"navigation":68,"path":69,"robots":70,"seo":71,"stem":72,"__hash__":73},"posts/2025/09/18 display-inline-block.md","18 Display Inline Block",{"type":7,"value":8,"toc":62},"minimark",[9,18,25,28,31,45,48,56,59],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"display-inline-block","Display: inline-block;",[19,20,21],"notes",{},[22,23,24],"p",{},"This is a repost from my old blog. First posted in 10/7/2016.",[26,27],"br",{},[22,29,30],{},"Ok, I have two div tag that I want to put side by side, so I use display: inline-block; css property.",[32,33,34],"code-block",{},[35,36,41],"pre",{"className":37,"code":39,"language":40},[38],"language-text","\u003Cdiv style=\"display: inline-block; width: 30%;\">...\u003C/div>\n\u003Cdiv style=\"display: inline-block; width: 70%;\">...\u003C/div>\n","text",[42,43,39],"code",{"__ignoreMap":44},"",[22,46,47],{},"I'm surprised to see there is a gap between the two divs somehow. And found out the way to fix the problem is to bring the divs together in the markup without any gap:",[32,49,50],{},[35,51,54],{"className":52,"code":53,"language":40},[38],"\u003Cdiv style=\"display: inline-block; width: 30%;\">\n...\u003C/div>\u003Cdiv style=\"display: inline-block; width: 70%;\">...\u003C/div>\n",[42,55,53],{"__ignoreMap":44},[22,57,58],{},"Ugly, yes, but it fixes the problem.",[22,60,61],{},"Edit: I have another case in which I want a gap between the two divs, so I don't bring the two divs together but I found out that somehow the second div is being put under the first one when printing. I ended up setting the second div with width of 69% so the total is 99% instead of 100% to make it work.",{"title":44,"searchDepth":63,"depth":63,"links":64},2,[],"2025-09-18T00:00:00.000Z","md",{},true,"/2025/09/18-display-inline-block",null,{"title":5,"description":44},"2025/09/18 display-inline-block","YnRz70oNUdZABwp357A4xL7yfVkUeDWkiLdmiwFD-zs",1785167453146]