Designers Learn Code: Inline vs. Block Elements
Designers Learn Code: Inline vs. Block Elements
We have discussed how elements are considered inline or block. Block elements start on a new line while inline elements remain in flow. 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. 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. The main differences between inline and block properties is how the elements handle the addition of margin and padding and constraining the width or the height. 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.
Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...
In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.