/*rex is the container of ex,ex2,ex3*/div.rexheight:200px;border:0px;margin:60px auto;padding: 0;vertical-align:top;div.exwidth:34%;height:200px;background-color:#4f443a;display:inline-block;margin: 0;padding: 0;vertical-align:top;div.ex2width:0.5%;height:200px;display:inline-block;margin: 0;padding: 0;vertical-align:top;div.ex3width:65.5%;height:200px;background-color:#7e8547;display:inline-block;margin: 0;padding: 0;vertical-align:top;The an outcome in browser:


What ns need:




This is in reality expected actions in HTML. Due to the fact that you room using inline-block, any kind of newline character or whitespace you have actually after the element and before an additional inline element, will be counted as a space. If you want the blocks to stack side by side choose in your picture, your HTML would should be like this.

You are watching: Display inline-block not working

working demo

It"s not very pretty, however then again, I would certainly recommend using another approach, maybe floating the facets instead.

Refer to below for a more in depth explanation of why this occurs.

How to remove the an are between inline-block elements?



Tristan here.

You have actually repeated the css code unnecessarily. You have the right to minify it by utilizing multiple css favor :

.ex, .ex2, .ex3 display: inline-block; vertical-align: top; margin: 0; padding: 0; height: 100%; /* no need of height: 200px; here */ /* if you need to prolong it come parent height */ /* then usage height: 100% */OR

div.rex > div /* code below */ You deserve to keep aspects side by side by using any of the below approaches:


Add float:left; to her div.ex, div.ex2 and also div.ex3 instead.


UPDATE:Add position:absolute to second and 3rd div if rise is not a choice.


UPDATE 2:Add this to only third div if you require that space in between.


My cheat is to collection font-size:0; in the parent element, since it"s the font-size the is leading to the math to not add up perfectly ( around a 4px overlap every div, depending upon screen size ) and also causes one div to show up under the other.

.rexdisplay:block;font-size:0;.exwidth:34%;height:200px;background-color:#4f443a;display:inline-block;vertical-align:top;margin: 0 .5% 0 0; /*small room between divs*/padding: 0;font-size:16px; /*restore font size*/.ex2width:65.5%;height:200px;background-color:#7e8547;display:inline-block;vertical-align:top;margin: 0;padding: 0;font-size:16px;
many thanks for contributing an answer to ridge Overflow!

Please be certain to answer the question. Provide details and also share her research!

But avoid

Asking for help, clarification, or responding to various other answers.Making statements based upon opinion; ago them up with recommendations or an individual experience.

See more: How Far Is Beaumont From Houston, Tx To Beaumont, Tx, Distance Between Houston, Tx And Beaumont, Tx

To discover more, see our advice on writing an excellent answers.

write-up Your prize Discard

By clicking “Post your Answer”, friend agree to our terms of service, privacy policy and cookie policy

Not the prize you're feather for? Browse various other questions tagged html css or questioning your very own question.

site architecture / logo © 2021 ridge Exchange Inc; user contributions licensed under cc by-sa. Rev2021.11.17.40778

your privacy

By click “Accept every cookies”, you agree stack Exchange can store cookies on your device and disclose information in accordance through our Cookie Policy.