Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is the box model in CSS technology?

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly shows you "what is the box model in CSS technology", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what is the box model in CSS technology".

Box model:

General order of layout:

1. Pay attention to the content and play the content

2. Control the distance between the content and the frame, Padding, inner margin

Padding (inside margin, the distance between the content and the label border, the width of the element = content width + padding): 10px; represents the distance between the top, right, bottom, left (clockwise) content and the frame is 10PX; you can also control the distance of the inner margin up and down, left and right: 50px 100px; you can completely control padding:10px 20px 30px 40px by writing in this way

3. Border: outer frame. You can write border-bottom:1px solid black; alone or abbreviate border:1px solid black.

4. Margin: outer margin. The distance of the border from the container. Margin:10px; is similar to padding top, right, bottom, left, and outer spacing, but only works at the top and left. Margin:10px20px 30px 40px

Margin-left:100px; margin-top:100px

5, for the table: cellpadding is the margin between the content of the cell and the border of the cell; the margin between the cellspacing cell and the cell.

Border fillet: border-radius:50px

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report