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
Installation and deployment tutorial of the latest MySQL version 5.7.17 (64bit ZIP green version) under Win 8 or above
First of all, the blogger is playing the communit...
MySQL 8.0.13 installation and configuration tutorial under CentOS7.3
1. Basic Environment 1. Operating system: CentOS ...
MySQL should never write update statements like this
Table of contents Preface cause Phenomenon why? A...
In-depth study of vue2.x--Explanation of the h function
Table of contents Solution, Summarize: vue projec...
Analysis of the difference between emits and attrs in Vue3
Table of contents in conclusion Practice Analysis...
CSS makes the footer automatically stick to the bottom when the content height is not enough
In the UI cutting process, the page is often comp...
The linkage method between menu and tab of vue+iview
Vue+iview menu and tab linkage I am currently dev...
Implementing image fragmentation loading function based on HTML code
Today we will implement a fragmented image loadin...
Linux dual network card binding script method example
In Linux operation and configuration work, dual n...
Some references about colors in HTML
In HTML, colors are represented in two ways. One i...
Do you know how many connections a Linux server can handle?
Preface First, let's see how to identify a TC...
Windows CVE-2019-0708 Remote Desktop Code Execution Vulnerability Reproduction Issue
1. Vulnerability Description On May 15, 2019, Mic...
Analysis of the Principle and Function of MySQL Database Master-Slave Replication
Table of contents 1. Database master-slave classi...
Detailed explanation of this pointing problem in JavaScript
Preface The this pointer in JS has always been a ...
Implementation of Single Div drawing techniques in CSS
You can often see articles about CSS drawing, suc...