| |
CSS Display -- Inline Elements |
|
|
Subject: CSS Display -- Inline Elements
Author: CyberSpider
In response to: CSS Display
Posted on: 04/15/2016 10:58:31 PM
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 »
>
> On 04/15/2016 08:12:58 PM CyberSpider wrote:
The CSS display property is used to override the default value as to how to show the HTML element. The values are:
none -- occupying no space as if it were not existing;
inline -- shown in one line as much as possible;
block -- starting from a newline with a block box;
inline-block -- block box but shown as inline;
.no-display {
display: none;
}
Try it yourself in sandbox »
References:
|
|
|
|
