course content

Course Content

CSS Fundamentals

Work with inline elementsWork with inline elements

Inline elements are situated on one line until there is enough space. Once the space is finished, elements start a new line.

inline elements

Main points we have to keep in mind when we work with such type of elements:

  • They have display: inline, by default.
  • We can not add width and height properties. width and height defined only with the element content.
  • We can set only horizontal (left and right)padding, margin and border.

Let's take into account this example. Within the css file, there will be styles that impact the element and those that have no impact.

html

index.html

css

index.css

js

index.js

By default, inline elements have a gap on the right side; in the case of the img elements, they have a gap at the bottom. This gap is not a padding or margin. It is just a blank space added by a browser to ensure that all elements will have a distance between each other.

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 3. Chapter 9