| |
CSS Display -- Block-Level Elements |
|
|
Subject: CSS Display -- Block-Level Elements
Author: CyberSpider
In response to: CSS Display -- Inline Elements
Posted on: 04/16/2016 12:28:38 AM
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 »
>
> On 04/15/2016 10:58:31 PM CyberSpider wrote:
In terms of default value of CSS display, it can be either:
inline -- for inline elements, or
block -- for block-level elements.
Generally, inline elements may contain only data and other inline elements. Examples of inline elements are:
b, i, em, code, time, sub, sup
input, button, lable, select, textarea
span, a, img, map, object
/* inline elements -- default */
i {
border: 1px solid red;
/* display: inline; */
}
b {
border: 1px solid red;
/* display: inline; */
}
a {
border: 1px solid red;
/* display: inline; */
}
Try it yourself in sandbox »
Now, let change the display layout by overriding the default 'inline'
/* inline elements -- overriding */
i {
border: 1px solid red;
display: block;
}
b {
border: 1px solid red;
display: block;
}
a {
border: 1px solid red;
display: block;
}
Try it yourself in sandbox »
References:
|
|
|
|
