planetimage Posted February 21, 2016 Share Posted February 21, 2016 Here is thing I wondering about. I can get different result from those of example. Can anyone explain why? ====exam1==== div { margin: 0; width: 100px; height: 100px; background: #ff0; display: inline-block; } <body> <div></div><div></div><div></div><div></div> </body> ====exam2==== div { margin: 0; width: 100px; height: 100px; background: #ff0; float: left; } <body> <div></div><div></div><div></div><div></div> </body> Link to comment Share on other sites More sharing options...
Ingolme Posted February 21, 2016 Share Posted February 21, 2016 What differences have you found? They actually do different things, though the appearance of both of those examples should be very similar. Most likely the first example will appear to have a slight offset on the left and a slight separation from anything below it. Link to comment Share on other sites More sharing options...
davej Posted February 21, 2016 Share Posted February 21, 2016 You are comparing the natural flow of inline elements vs the effect of float on block objects. If you are learning about float I would suggest that you make the blocks different sizes. Link to comment Share on other sites More sharing options...
planetimage Posted February 21, 2016 Author Share Posted February 21, 2016 Is it impossible remove little space around div block if I'm using display inline-block property? Link to comment Share on other sites More sharing options...
Ingolme Posted February 21, 2016 Share Posted February 21, 2016 THe space below the block can be removed by setting the vertical-align property to "middle". The space between divs can be removed by having all the HTML one following another, no line breaks or spaces between the tags. If you're seeing space between the divs, that means that the code you're using is not the code you posted here. Link to comment Share on other sites More sharing options...
planetimage Posted February 22, 2016 Author Share Posted February 22, 2016 It work!!! Finally I can get sleep~~~Thanks for your help~~~~!!! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now