margin 可以改变元素的可视尺寸,但和padding 是互补的 <style> /* 元素的宽度无变化 还是300px 因为只要设定了宽度,margin就无法改变元素尺寸 */ .father{ width: 300px; margin: 0 -20px; } /* 元素的宽度通过负值设置变大了 340px 这时的宽度就是充分利用可用空间 */ .father{ width: 300px; } .son{ margin: 0 -20px; } </style> <div class="father"> <div class="son"></div> </div>
左和右的负边距对元素宽度的影响 <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } .container{ border:solid gray 5px; height: 210px; width: 460px; } ul{ overflow: hidden; margin-right: -20px; } li{ width:100px; height: 100px; background-color: pink; float: left; margin-right: 20px; margin-bottom: 10px; } </style> <div class="container"> <ul> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li> <li>子元素7</li> <li>子元素8</li> </ul> </div>
1、负边距对元素自身的影响 <style> .father{ width: 200px; height: 100px; background-color: pink; } .son{ background-color: blue; margin-right: -30px; color:#fff; } </style> <div class="father"> <div class="son">555</div> </div>
<style> div{ width: 200px; height: 200px; background-color: #ccc; top: 50%; left: 50%; position:absolute; margin-left: -50px; margin-top: -50px; } </style> <div></div>
来源:https://www./content-4-816501.html |
|