Solution to the problem that the div width is set to width:100% and then the padding or margin exceeds the parent element
|
Preface This article introduces how to use the new CSS3 attribute box-sizing to solve the problem of setting the div width to 100% and then setting padding or margin beyond the parent element. Friends in need can refer to it. grammar box-sizing: content-box|border-box|inherit; Value 1, content-box This is the width and height behavior specified by CSS2.1. The width and height are applied to the element's content box respectively. The element's padding and border are drawn in addition to the width and height. Value 2, border-box The width and height specified for an element determine the element's border box. That is, any padding and borders specified for the element will be drawn within the specified width and height. The content width and height are obtained by subtracting the border and padding from the set width and height respectively. Value 3: inherit Specifies that the value of the box-sizing property should be inherited from the parent element. example <!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This div occupies the left half. </div>
</div>
</body>
</html>Summarize The above is the full content of this article. I hope that the content of this article can be of some help to your study or work. If you have any questions, you can leave a message to communicate. |
<<: Node+Express test server performance
Recommend
jQuery implements simple pop-up window effect
This article shares the specific code of jQuery t...
Practical method of upgrading PHP to 5.6 in Linux
1: Check the PHP version after entering the termi...
Synology NAS uses Docker container to build KMS activation server to activate Windows system and office (operation steps)
Preface The Windows system that can be activated ...
Ubuntu 18.04 installs mysql 5.7.23
I installed MySQL smoothly in Ubuntu 16.04 before...
Some simple implementation codes of the form element take registration as an example
Code implementation: Copy code The code is as fol...
A brief analysis of the basic concepts of HTML web pages
What is a web page? The page displayed after the ...
Detailed explanation of non-parent-child component value transfer in Vue3
Table of contents App.vue sub1.vue sub2.vue Summa...
Docker configures the storage location of local images and containers
Use the find command to find files larger than a ...
HTML table markup tutorial (9): cell spacing attribute CELLSPACING
A certain distance can be set between cells in a ...
A simple example of MySQL joint table query
MySql uses joined table queries, which may be dif...
Download MySQL 5.7 and detailed installation diagram for MySql on Mac
1. Enter the following address in the browser htt...
SQL implementation of LeetCode (175. Joining two tables)
[LeetCode] 175.Combine Two Tables Table: Person +...
Share CSS writing standards and order [recommended for everyone to use]
CSS writing order 1. Position attributes (positio...
Use the Linux seq command to generate a sequence of numbers (recommended)
The Linux seq command can generate lists of numbe...
PyTorch development environment installation tutorial under Windows
Anaconda Installation Anaconda is a software pack...