| |
Inline vs Inline-block |
|
|
Subject: Inline vs Inline-block
Author: CyberSpider
In response to: CSS Display -- Block-Level Elements
Posted on: 04/16/2016 07:14:32 PM
Generally, block-level elements are displayed in block mode and this is the default behavior. In certain cases, they could be displayed in inline-block mode or inline mode.
Let's take a look at the following example:
.box {
background: green;
margin: 5px;
width: 80px;
height: 100px;
}
#inline-block {
display: inline-block;
}
#inline {
display: inline;
}
As it can be seen, the significant difference is that block elements lose their dimension characteristics (width and height) if they are displayed in inline mode.
>
> On 04/16/2016 12:28:38 AM CyberSpider wrote:
A block-level element occupies the entire space in width of its parent element, thereby creating a "block". Examples of inline elements are:
p, pre
h1 - h6, hr
ul, ol, dl, li
div, table, form
main, section, article, header, footer, figure, video
/* block-level elements -- default */
p {
border: 1px solid red;
/* display: block; */
}
Try it yourself in sandbox »
Now, let's change the display layout by overriding the default 'block'
/* block-level elements -- overriding */
p {
border: 1px solid red;
display: inline;
}
Try it yourself in sandbox »
References:
|
|
|
|
