前端 - webapp如果把页面div宽度设成100%,外边距设成5px，右边无法显示效果？

Question

我把整个ul的外边距设成4px，但只有右边的没反应。
在开发webapp时总遇到这种情况，距离只要和右边沾边就无法表现出来

Answer 1

*{
   box-sizing: border-box;
}

Answer 2

ul{box-sizing:border-box}

Answer 3

You can use the two people upstairs box-sizing: border-box
You can also use {width: -moz-calc(100% - 8px); width: -webkit-calc(100% - 8px); width: calc(100% - 8px); margin: 0 4px;}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

Answer 4

You are 100%+margin 5px*2>100%. Of course, it will not be displayed. Either add a box-sizing: border-box, or put a layer inside, remove the outer margins of the outer layer, and define padding of 5px on the inner layer. It is better.

Answer 5

Border-box cannot control the margin, so you should be honest and not set the width of p to 100%, and then set the margin and it will be OK.

Answer 6

I have encountered this before when I was working on an APP page for the first time. As mentioned above, remove 100% and set the margin directly.
In addition, in my impression, the border-box attribute only affects padding and border.