Coding for Beginners: CSS Basics #10— Inline vs Block Elements

Описание: Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...

The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here:    / @designerslearncode  

------

We have discussed how elements are considered inline or block. Block elements start on a new line while inline elements remain in flow.

So an example of a block element is the p element. In this code where we have two paragraph elements, the second element starts a new line. An example of an inline element is the span element. You can see here that the span remains on the same line and flows into the p element. This shows the html code that corresponds to the "home" section shown.

However, there is a CSS property, display, that allows you to decide whether an element is either inline, block, inline-block, or none. When you set the display property to "none", you will hide the element. We will compare it with the visibility property in another video.

Today, we will look at the difference between inline, block, and inline-block. As you can imagine, inline turns a block element inline while block turns an inline element into a block element. Finally, inline-block causes a block element to flow as an inline element but the element will retain some features of a block element.

We will look at some examples to clarify this behavior.

A common use for inline-block is in the navigation. In a previous example, we saw how floating elements can be used to create a navigation by displaying list elements horizontally. The same thing can be accomplished using inline-block. It is important to retain some block properties so the list elements can be styled as buttons.

This is an unstyled navigation with an unordered list. This is the html code for our navigation. Now we can examine the css. Instead of floating elements, we are using "display: inline-block" on our list elements. This will cause them to display horizontally instead of vertically. The retained block properties allow the navigation list elements to display as buttons.

#HTML #CSS #coding #web #accessibility #inlineelement #blockelement #inlinevs.block #whatisaninlineelement #whatisablockelement #codinglife #webdesign #designerslearncode #dailycodesnippet #codingforbeginners #tags #openingtag #closingtag #learntocode #codingtutorial #htmltutorial #csstutorial #webdevelopment #htmltutorialforbeginners #csstutorialforbeginners #programmingforbeginners #htmlcssfullcourse