WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Layout - inline-block


The inline-square Value

It has been feasible for quite a while to make a network of boxes that fills the program width and wraps pleasantly (when the program is resized), by utilizing the float property.

However, the inline-block estimation of the display property makes this even easier.

inline-square components resemble inline components yet they can have a width and a tallness.

Examples

The old way - utilizing float (see that we likewise need to determine a clear property for the component after the drifting boxes):

Example

.floating-box { float: left;
    width: 150px;
    height: 65px;
    margin: 10px;
    border: 3px solid blue;
    } .after-box { clear: left;
    }
Try it yourself »

The same impact can be accomplished by utilizing the inline-block esteem of the display property (see that no clear property is needed):

Example

.floating-box { display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid green;
    }
Try it yourself »