I have learned that every element on a webpage is a rectangular box that has displayed as either a “block” level element or an “in-line” element.
There are three different display declarations in CSS.
Inline
The first CSS display “inline” declaration which makes your rectangular boxes whether it is a box set of text or a set of images, display horizontally inline as if they were in a sentence on a page. These elements will wrap to the following line if space on the right gets too cramped. What is not affected is the width and length of the element even if you change it. In the CSS, I have entered height and weight declaration width: 135px; height: 120px; which you can see the browser is not responding to but if you look below to the inline-block property it does.
.blog-element-inline li {
text-align: center;
margin-top: 25px;
display: inline;
background-color: lightgrey;
color: black;
list-style: none;
font-size: 2em;
width: 135px;
height: 120px;
}
- element 1
- element 2
- element 3
Block
Now the block display reminds me of blocks that we use to use as kids. Stacked on top of each other and we tried to get the stack so neatly with the side so flush. The blocks will set to whatever size you chose, but the elements will still stack on top of each other. If you do not assign a margin, width to the property, the block element will take up the whole page horizontally. By default, divs, paragraphs and headings are all block elements.
.blog-element-block li {
text-align: center;
display: block;
margin-top: 5px;
background-color: lightgrey;
color: black;
list-style: none;
font-size: 2em;
}
- element 1
- element 2
- element 3
Inline-Block
The last display declaration is the inline-block display; it is different as much as it is similar to the two above. It uses both properties the inline and the block hence the name duh. But as in-line won’t give up any size and margin properties. Inline-block will.
.blog-element-inblock li {
display: inline-block;
margin-top: 35px;
background-color: lightgrey;
color: black;
list-style: none;
font-size: 2em;
width: 135px;
height: 120px;
}
- element 1
- element 2
- element 3
The display declarations can give your layout a lot more flexibility in how you want your web pages to look. You can even use these properties in different classes, ids, and elements to work together for you to invoke the design you will be implementing in your designs.
