When you write HTML, write the inline elements that need to be next to each other, set their parent container's font-size to 0, and then set the font size of the inline elements, for example:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css"> *{margin:0;padding:0;}Body{Color:#333}. Demo{Overflow:Hidden;font-size:0}span{Display:Inline-block;width:100px;Height:100px;Background-color:#ddd;Border:1px solid #000; }. Demo span{font-size:16px; } </style></Head><Body> <Divclass= "Demo"> <span>Set inline element to write on one line</span> <span>Set inline element to write on one line</span> <span>Set inline element to write on one line</span> <span>Set inline element to write on one line</span> <span>Set inline element to write on one line</span> <span>Set inline element to write on one line</span> </Div> </Body></HTML>
Show:
How to handle horizontal gaps between inline elements in HTML