HTML and CSS — Inline, Inline-Block and Block elements
Understanding the display property of a CSS element is foundational to understanding CSS. In this post, we will continue building up our foundations from the previous post by examining the display property and understanding a bit more on how to properly style buttons and links.
Block Elements
By default, block level elements create a new line of content in the HTML document. Moreover, they stack on top of each other creating a series of rows. These elements are block elements by default: Paragraphs, Headings, Lists, list items, divs, header, footer, main and section. Block level elements have a default width of 100% and a default height of 0, but they will grow in height according to the content that is inside of them. The block level element’s width of 100% will take up the full width of its parent element. If the block level element’s parent is the body then the block level element will take the full width of the page, in proportion to the size of the browser.
Inline Elements
Inline elements do not create a new line of content in the HTML markup by default. Instead they "go with the flow”. Inline elements include: Links, strong, em, span and images (sort of. We’ll address images in another post 😉). In addition, block level elements cannot work inside an inline element. Only inline elements make sense inside other inline elements -- otherwise this is not considered valid HTML.
Inline elements will only have margin, padding and borders on the left and right side of themselves. The other elements around your inline block element ignores whatever margin, padding and border that is added on the top or bottom. If a background color is added to an inline element and then either top or bottom padding is also added to this inline element for instance, you will see the background color covering over the neighboring elements. The the neighboring elements will neither move nor respect the inline elements space created by the top and bottom margin / padding. Here’s a code pen for demonstration. Moreover neither a width or nor a height can be set on an inline element. The width or height you set on an inline element will not do anything.
With regards to, span, the span element has no semantic meaning whatsoever. We just use this inline element to make something change and it’s good to note that span comes with no default styling. Typically, span is used to select pieces of text so certain styling can be added to it.
Styling links
Let’s turn to styling links which is important to know for any site development. There are five pseudo selectors to keep in mind when thinking about styling links. The following is a list of the pseudo selectors for links, ordered by their CSS specificity, starting with the most generic link and ending with the most specific active:
a:link— helps select the represents the state of an anchor tag that has not yet been visited.a:visited-- style of link that has been clicked.a:focus-- helps style elements when navigating by keyboard, as in, tabbing through a webpage.a:hover-- allows one to style the appearance when one mouses over the element.a:active-- this allows one to style the element when a user is actively clicking on the link.
The above pseudo selectors are important because people should know that they can interact with links -- the site should make this obvious. One of the best ways to make links obvious is to change the color on hover and on focus. When a user hovers over a link or tabs to the link the color should change so it's obviously clickable. Feel free to leave the text decoration on but if you turn it off the link still needs to be obviously clickable. Focus state needs to be styled as well for ADA compliance.
Important note on specificity: CSS always chooses the last style when there's equivalent specificity.
Inline-Block
Remember at the start of this article where we stated that inline elements cannot have a set top and bottom on either margin or padding with its neighboring elements respecting the space created? inline-block allows us to have elements on the same line — inline — and have margins and padding on them. Without inline block, inline elements padding would spill over other elements. In short, inline-block allows elements in the same line to push other content away from them. Here’s a code pen for demonstration.
Styling buttons
As far as buttons are concerned, always use padding to create the size
of the button. Do not use either width or the height. Add the class on the link itself and increase its size with padding so the entire button can be clicked. By using using padding to manage the size of the button the button size stays proportional to the text within it.