Menu
I have created example at http://jsfiddle.net/GKnkW/2/
html
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <div class="step">1</div> <div class="step">2</div> <br/><br/> <div class="step1">3</div> <div class="step1">4</div> </body> </html> css
.step { height:150px; width:150px; background:yellow; display:inline; } .step1 { height:150px; width:150px; background:yellow; } I want to display two divs side by side with their original height and width ( set in css ) as soon as i add display:inline property to css it seems to loose height and width defined earlier. [ check divs with # 1 and #2 which seems to loose height and width setting ]
can some one pin point an error which I seems to be doing or workaround for this weird behavior ?
844
inline The element doesn't start on a new line and only occupy just the width it requires. You can't set the width or height. inline-block It's formatted just like the inline element, where it doesn't start on a new line. BUT, you can set width and height values.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
display: inlineAn element with a display property set to inline will not start on a new line and it will take up the remaining/available screen width. It just takes up the space such an element would normally take.
Container with display:flex behaves like a block-level element itself, while display:inline-flex makes the container behaves like an inline element.
Inline objects don't have heights or widths. Why are you setting them inline to begin with? You probably want to either float them or use display: inline-block.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
