The attributes of the css box model are: 1. margin attribute; 2. border attribute; 3. transparent attribute; 4. padding attribute.
The operating environment of this tutorial: Windows 10 system, CSS3, this article is applicable to all brands of computers.
The CSS box model is a set of properties that define spacing, dimensions, margins, borders, and padding between text content and borders around an element.
(Learning video recommendation: css video tutorial)
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.boxWrapper{
width: 150px;
height: 150px;
background: #ccc;
margin: 20px 20px 20px 20px;
padding: 20px 20px 20px 20px;
border: 20px solid #00f;
}
.boxInner{
width: 100px;
height: 100px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>Rendering:
It can be seen that the outer margin is invisible. If you set the background of the parent element, you can see it; if the background color is set to a different background in the border area, you can see the padding. )area. And the box model is composed of margin (outer border) border (border) padding (inner margin) content (content).
2. Introduction to attributes
1. Margin attribute
Concept: The margin attribute is applied to the space outside the box, or the area between the box and other elements in the document , or the area between the box and the browser window. The margin grows outside the box and will not affect the size of the box itself.
Attributes: margin-top (top outer border), margin-right (right outer border), margin-bottom (lower outer border), margin-left (left outer border)
Value : Support length, percentage, auto
Usage:
margin:10px 四周(上，右，下，左) margin:10px 20px 上下 左右 margin:10px 20px 30px 上 左右 下 margin:10px 20px 30px 40px 上右下左 margin支持负值！！ 让子元素在父元素里面左右居中：margin:0 auto;
margin Common bugs:
a: When neither the parent element nor the child element is floating: give the first Adding margin-top to a child element will mistakenly add the margin value to the parent element
Example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.boxWrapper{
width: 150px;
height: 150px;
background: #ccc;
}
.boxInner{
width: 100px;
height: 100px;
margin-top: 20px;
background: skyblue;
}
.other{
width: 50px;
height: 50px;
background: #999;
/* margin-top: 20px; */
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html> Effect picture:
Conclusion: When margin-top is added to the first child element (block element) in the parent element, the value of margin-top will be mistakenly added to the parent element (based on the current elements). , without adding borders and floats)
Solution:
1. bfc Add overflow:hidden to the parent element; it is recommended to use
2. Add overflow: hidden to the parent element and child Add a floating attribute to the element;
3. You can add a border to the parent element
4. Change the margin to padding
b: The upper and lower margins of two adjacent elements will overlap. Set to a larger value.
Sample code:
.boxInner{
width: 100px;
height: 100px;
margin-bottom: 20px;
background: skyblue;
}
.other{
width: 50px;
height: 50px;
background: #999;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="boxWrapper">
<div class="boxInner"></div>
<div class="other"></div>
</div>
</body>
</html>Rendering:
You can see that the margins are folded. When the bottom margin of boxInner touches the top margin of other element, the margin is collapsed! , there is only 20px between them, not 40px;
2. Border
border attribute: used to control the width, style, and color of the box border.
Attribute: value (percentage not supported) Commonly used px
border:10px solid red; border-width:10px; border-style:solid; border-color:red;
Linear: solid (solid line) dashed (dashed line) dotted (dotted line) double (double line) none/0 (none) Border)
Add a border in a single direction:
border-left/right/top/bottom:10px solid yellow;
Border setting method;
border:solid red; border-width:; 一个值：四周 两个值：上下 左右 三个值：上 左右 下 四个值：上右下左
3. transparent; instead of the color value is transparent
4、padding属性：内边距是元素的内容和边框之间的区域
用法：
1:padding是添加在父元素（盒子）上的 2:padding 调整子元素在父元素里面的位置关系 3:padding会把盒子撑大。 4：想让盒子保持原有的大小：在宽高的基础上减掉padding值。 5:给单一一个方向添加padding值： padding-top/bottom/left/right: 6:padding设置方法： padding:10px 四周 padding:10px 20px 上下 左右 padding:10px 20px 30px 上 左右 下 padding:10px 20px 30px 40px 上右下左 7：padding不会对背景图造成影响 8：padding的值不能为负值！！！
对比padding和margin
1.padding区域是边框内边缘和内容外边缘之间的区域。 2.auto关键字对padding属性不起作用。 3.padding属性不可以接受复制。 4.padding不存在内边距折叠，只有外边距折叠。
相关推荐：CSS教程
The above is the detailed content of What properties does the css box model have?. For more information, please follow other related articles on the PHP Chinese website!
How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AMI got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?
Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AMYes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.
Quick Gulp Cache BustingApr 18, 2025 am 11:23 AMYou should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser
In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AMMany developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have
Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AMHave you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of
Front Conference in ZürichApr 18, 2025 am 11:03 AMI'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited
Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AMOne of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details
Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AMIn this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
Notepad++7.3.1
Easy-to-use and free code editor
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
Dreamweaver CS6
Visual web development tools
