| Author |
Topic: CSS Display |
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
 |
|
|
| CSS Display |
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 »
|
|
|
|
|
|
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Display -- Inline Elements |
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 »
|
|
|
|
|
|
|
CyberSpider
member
offline |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| CSS Display -- Block-Level Elements |
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 »
|
|
|
|
|
|
|
CyberSpider
member
offline |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| Inline vs Inline-block |
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;
}
Try it yourself in sandbox »
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.
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 04/15/2016 08:12:58 PM
Edit
Quote
Report
Profile
Reply