Detailed explanation of the box model size depends on its padding, margin, and border values
|
The box model specifies the size of the element box's width and height, padding, border, and margin. The blank space inside the border is the padding, and the blank space outside the border is the margin. As shown below, the width of the box model element box = the width of the content area + 2 (padding + margin + border), that is, the width of the element in this example is 170px. It should be noted that in CSS, width and height refer to the width and height of the content area. Increasing padding, borders, and margins will not affect the size of the content area, but will increase the overall size of the element's box. (When viewing in the browser, remember to open the console F12 and click the corresponding element to view)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The size of the box model depends on its padding, margin, and border values</title>
<style type="text/css">
div{
padding: 10px;/*Padding*/
margin: 20px;/*margin*/
margin: 10px 20px 30px 40px;/*top 10px right 20px bottom 30px left 40px*/
margin: 10px 20px;/*up, down, left, and right*/
margin: 10px 20px ;/*different for top and bottom, same for left and right*/
margin: 10px 20px 30px;/*margin*/
border: 5px solid red;/*border*/
width: 100px;/*Content area width 100*/
height: 100px;/*Content area height 100*/
}
/*Box size value = 2 (padding + border + margin)*//*The size of the div*/
</style>
</head>
<body>
<div>You can't learn the entire script by reading many books, you need more practice. </div>
</body>
</html>Whether it is margin or padding, they are arranged in a clockwise direction, with values defined at top, right, bottom, and left. For example, margin:10px 10px 10px 10px means that 10px of margins are added to the top, bottom, left, and right of the box, in short margin: 10px; marigin:10px 10px; top, bottom, left, and right margins are 10px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin so-called bug is actually overlapping, how to solve it</title>
<style type="text/css">
.box1,.box2{
width: 200px;
height: 200px;
margin: 10px 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">The operability does not exist in the functional specification</div>
<div class="box2">Software must be usable before it can be reused. </div>
</body>
</html>According to normal thinking, the upper and lower spacing of the two boxes in the above code should be a 20px gap, but in fact, when we check it in the console, there is only 10px, and the other 10px is obviously overlapped. If we adjust the margin value of the two boxes, we will find that the upper and lower spacing takes the maximum value of 20px (margin equal elements take the maximum value); Solution: 1. float2 changes the element structure display: inline-block. In addition, if the margin is nested, that is, the parent-child relationship, you will find that they are overlapping and there is no gap, so how to solve these problems caused by margin? Solution: The box has no lid, find a way to fill the two ends with content, you can use border, padding, overflow: hidden; the box model is very important for our subsequent website layout, which is conducive to the precise positioning of the website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solving the bug caused by margin</title>
<style type="text/css">
/* .box1,.box2{
width: 200px;
height: 200px;
background-color: red;
} */
/* .box1{
margin: 10px 20px;
}
.box2{
margin: 20px 10px;
}
.box3{
margin: 20px 10px;
}
.box4{
margin: 10px 20px;
} */
/* Solutions to the problems caused by the box model's leveling: 1. float 2. display: inline-block 3. Directly write a maximum value and take the maximum margin at the same level*/
div{
/* float: left; */
display: inline-block;
width: 1200px;
}
.box1{
margin: 10px 20px;
}
.box2{
margin: 80px 10px;
}
/* Solution to the problem caused by horizontal nesting of box model: the box has no lid, find a way to fill the two ends with content, you can use border, padding, overflow:hidden; fill the top and bottom with text*/
p{
width: 800px;
}
.box3,.box4{
margin: 30px;
}
.box3{
background-color: green;
/* border:1px solid red*//*Add border to the parent element*/
padding: 10px; /*Add padding to the parent element*/
/*overflow: hidden;*//*Add overflow:hidden to hide the excess part, which will result in all the excess being cut off*/
}
.box4{
display: block;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">The operability does not exist in the functional specification</div>
<div class="box2">Software must be usable before it can be reused. </div>
<p class="box3">
<!-- Simplicity does not precede complexity, but comes after complexity. -->
<span class="box4">The code of the past is untested code. </span>
<!-- Either be the first or be the best -->
</p>
</body>
</html>This concludes this article on how the size of the box model depends on its padding, margin, and border values. For more information on padding, margin, and border values, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
>>: Nodejs plug-in and usage summary
Recommend
Analysis of the principle of using PDO to prevent SQL injection
Preface This article uses pdo's preprocessing...
Install Apache2.4+PHP7.0+MySQL5.7.16 on macOS Sierra
Although Mac systems come with PHP and Apache, so...
Solution to Nginx session loss problem
In the path of using nginx as a reverse proxy tom...
Docker container from entry to obsession (recommended)
1. What is Docker? Everyone knows about virtual m...
js realizes the image cutting function
This article example shares the specific code of ...
Vite introduces the implementation of virtual files
Table of contents background Importing virtual fi...
CSS web page responsive layout to automatically adapt to PC/Pad/Phone devices
Preface There are many devices nowadays, includin...
Eight rules for effective web forms
If you're collecting information from your us...
Detailed explanation of Linux redirection usage
I believe that everyone needs to copy and paste d...
Win10 installation Linux system tutorial diagram
To install a virtual machine on a Windows system,...
Tomcat Server Getting Started Super Detailed Tutorial
Table of contents 1. Some concepts of Tomcat –1, ...
Vue implements Dialog encapsulation
Table of contents Vue2 Writing Vue3 plugin versio...
Share 101 MySQL debugging and optimization tips
MySQL is a powerful open source database. With th...
Implementation of vite+vue3.0+ts+element-plus to quickly build a project
Table of contents vite function Use Environment B...
Linux/Mac MySQL forgotten password command line method to change the password
All prerequisites require root permissions 1. End...