About the overlap of margin value and vertical margin in CSS
|
Margin of parallel boxes (overlap of double margins) interview question: If one box has a top margin and the other box has a bottom margin, will there be a margin overlap problem? Solution: Take the larger value, not the sum of their values, but the one with the larger value will prevail!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box1,.box2{
width: 200px;
height: 200px;
}
.box1{
background-color: #f90;
margin-bottom: 20px;
}
.box2{
background-color: aqua;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Margin and padding have the same orientation and value, in clockwise direction (up, right, bottom, left). Click to view "Padding and abbreviations for CSS box model" This is the end of this article about margin values and vertical margin overlap in CSS. For more information about margin and vertical margin overlap, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: HTML cellpadding and cellspacing attributes explained in pictures
>>: How to connect to a remote docker server with a certificate
Recommend
How to use tinymce in vue3.0+ and implement the function of uploading multiple images and file upload formula editing
Related Documents Part of this article is referen...
JS ES new features template string
Table of contents 1. What is a template string? 2...
XHTML 1.0 Reference
Arrange by functionNN : Indicates which earlier ve...
JavaScript to switch multiple pictures
This article shares the specific code of JavaScri...
MySQL uses mysqldump+binlog to completely restore the deleted database principle analysis
1. Overview In the daily operation and maintenanc...
Top 10 useful and important open source tools in 2019
In Black Duck's 2017 open source survey, 77% ...
Some useful meta setting methods (must read)
<meta name="viewport" content="...
mysql5.7.21 utf8 encoding problem and solution in Mac environment
1. Goal: Change the value of character_set_server...
An article to give you a deep understanding of Mysql triggers
Table of contents 1. When inserting or modifying ...
How to use docker to deploy dubbo project
1. First, use springboot to build a simple dubbo ...
MySQL database case sensitivity issue
In MySQL, databases correspond to directories wit...
Some ways to solve the problem of Jenkins integrated docker plugin
Table of contents background Question 1 Error 2 E...
How to eliminate the extra blank space at the bottom of the created web page when browsing
When using Dreamweaver or FrontPage to create HTM...
A simple example of creating a thin line table in html
Regarding how to create this thin-line table, a s...
MySQL 20 high-performance architecture design principles (worth collecting)
Open Source Database Architecture Design Principl...