Sprint 2 Technical

Christopher Alba's Blog

a button to scroll down

What does it mean to display inline vs inline blocks?

Display Inline

When you display something as inline, they will appear in the same line as other elements. Any height and width parameters set will be ignored, aswell as top and bottom padding and margins. However, the top and bottom padding will overlap other elements. This also means that the left and right margin and padding will be present.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Underlying CSS Code:

            
                .inline1{
                    display:inline; 
                    width:1000px;
                    height:1000px;
                    padding:50px;
                    margin:20px;
                    background:gray;
                }

Display Block

Every single setting in the CSS is respected. However, there is a linebreak after each block.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Underlying CSS Code:

            
                .inline2{
                    display:block; 
                    width:150px;
                    height:150px;
                    padding:50px;
                    margin:20px;
                    background:gray;
                }

Display Inline Block

Every single setting in the CSS is respected. There is no linebreak after each block and so each inline block can sit side by side.

For example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Underlying CSS Code:

            
                .inline3{
                    display:inline-block; 
                    width:150px;
                    height:150px;
                    padding:50px;
                    margin:20px;
                    background:gray;
                }