When we write CSS styles, when two boxes are nested together, the top of the inside box is placed on the top of the outside box, as shown in the figure below:
At this time, if the properties like margin-top are set for the inner box, there will be no space between the top of the inner box and the outer box, but the outer box is pushed down, as if margin-top property is set for the outer box.
set margin-top property for the inner box, as shown in the figure below:
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 200px;
height: 200px;
background-color: red;
}
.wrap .box {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 50px;
}
</style>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
so the simplest way is to add a property to the outer box :
overflow: hidden;
The results are as follows:
Read More:
- Solving ora-21561: oid generation failed
- How to center the box horizontally and vertically in HTML
- CSS: several ways to center the box vertically and horizontally
- Several ways to center elements horizontally and vertically
- Attempted import error: ‘injectglobal’ is not exported from ‘styled components’
- VUEJS Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of
- JavaScript to achieve image rotation effect
- JavaScript / JS native dynamic introduction of external CSS files and dynamic insertion of CSS code fragments
- Miscellaneous Notes (2)
- Modifying the default style of scrollbar in Android
- (element UI component table) how to add a style to a table
- Simple license plate recognition based on Halcon
- Vue element admin configure global styles
- Android layout: layer layout
- Android solves the gliding problem of EditText
- Android Studio Error: Some file crunching failed, see logs for details
- Vue + element, SCSS plus / deep / style does not work
- Android Studio Error:Some file crunching failed, see logs for details
- How to keep textview and ImageView on the same line
- Solve the problem that the value in the disabled tag cannot be passed to the server