Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "case Analysis of CSS Box Model". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS Box Model (Box Model)

Box model ("box model") is a term in CSS, which describes the use of elements in Body and Body as boxes for design and layout on a page. Elements in Body and Body can be regarded as boxes, and box models are essentially a box.

It includes: margin (margin), border (border), inner margin (padding), and actual content (connent).

The following illustrates the box model (Box Model):

Margin (margin)-clears the border area. Margin has no background color, it is completely transparent

Border (border)-the padding and content around the border. The border is affected by the background color of the box.

Padding (inside margin)-clears the area around the content. Will be affected by the background color filled in the box

Content-the contents of the box, displaying text and images

The internal structure of the box model

So the width (or height) actually occupied by a box is composed of "content + inner margin + border + outer margin".

Control the size of the content by setting the values of width and height, and for any box, you can set the border, padding and margin of each of the four sides (top, right, bottom, left).

So here's the problem again.

It is well known that inline elements do not fully play a role in setting up margin-top and margin-bottom and padding-top and padding-bottom

What is the width (or height) actually occupied by the elements in the line?

Let's figure out under what circumstances it doesn't work on top bottom.

Replacement elements in inline (inline) elements work, but non-replacement elements do not.

Replacement element: an element that is used as a placeholder for other content. Such as: img, input, etc.

Non-replacement element: refers to the elements contained in the document, such as: span, etc.

Take non-replacement elements as an example

To get the actual width and height of a span, use offsetWidth and offsetHeight

Arrow on chorome to get elements and print desk output

This is the end of the content of "CSS Box Model case Analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.