CSS Sizing – width, height, line-height property

CSS

0 Comments

In this example, we'll learn how to size elements in CSS using the width, height, and line-height properties.

Example

HTML

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Integer felis nisl, euismod ut porttitor sed, placerat ac felis.
</p>

CSS

p {
    width: 300px;
    height: 100px;

    line-height: 25px;

    background-color: lightblue;
}

Result

width property
Sets how wide a container is (if you have padding or borders, the actual width and height will be bigger than set here). width and height cannot be set on display: inline elements (but it can on block and inline-block).
height property
Sets how tall a container is.
line-height property
Sets how tall each line is. If the line is taller than the text in it, the text is centered vertically. This is a nice way to add some spacing between lines in a paragraph.
Practice in Editor

Leave a Comment