CSS Display Properties: Block, Inline, And Inline-block - Medium

Trang chủ » Html Css Block Elements » CSS Display Properties: Block, Inline, And Inline-block - Medium

Có thể bạn quan tâm

Open in app

Sign up

Sign in

Write

Sign up

Sign in

Member-only story

CSS display properties: block, inline, and inline-block — & how to tell the differenceDaphne Watson

Daphne Watson

Follow

3 min readFeb 8, 2017

--

14

Share

Web browsers treat every element as a kind of box. However, CSS has two different types of boxes — block and inline.

A block element always starts on a new line, and fills up the horizontal space left and right on the web page. You can add margins and padding on all four sides of any block element — top, right, left, and bottom.

Some examples of block elements are <div> and <p> tags. As shown below, I’ve also added green padding on all four sides of each block element.

Inline Elements

Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <span> , <strong>, and <img> tags.

When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.

Inline elements can actually appear within block elements, as shown below. I’ve added white padding on the left and right side of each inline element.

Daphne WatsonFollow

Written by Daphne Watson

357 Followers

Technical writer based in California

Follow

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams

Từ khóa » Html Css Block Elements