border-box

问题 I want to add padding to the cells of my table, but this causes text, inputs, etc inside the table to overflow. From other Stack Overflow discussions, I've gathered that the answer is to set box-sizing: border-box , but this isn't working for me. Below is a minimal example to illustrate the problem. * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } table, th, td { border: 1px solid black; padding: 1.5%; } table { border-collapse: collapse; } <table>

问题 This question already has answers here : How do I remove the space between inline/inline-block elements? (40 answers) Closed 4 years ago . Not sure what I'm doing wrong, I thought that by adding border-box, it would fit those 4 boxes neatly. http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; } <div class="ok"> <div class="box">1</div>

问题 This question already has answers here : How do I remove the space between inline/inline-block elements? (40 answers) Closed 4 years ago . Not sure what I'm doing wrong, I thought that by adding border-box, it would fit those 4 boxes neatly. http://jsfiddle.net/jzhang172/x3ftdx6n/ .ok{ width:300px; background:red; height:100px; box-sizing:border-box; } .box{ display:inline-block; box-sizing:border-box; width:25%; border:2px solid blue; height:100%; } <div class="ok"> <div class="box">1</div>

问题 I'm busy writing a small snippet of code that should allow cross-browser usage of the border-box box model. So far the basic functionality works fine, but I can't get the margin to work. It should adapt to the space that's available, but console returns a NaN and I have no idea where it comes from. Here is a fiddle. The console.log doesn't even log anything and I don't know why. Any help is greatly appreciated. 回答1: In many parts of your fiddle you have this pattern: ($(this).css("border-left

问题 Used fiddle to set up test case: http://jsfiddle.net/5M7X7/2/ I have a pet project flexing some border-box layouts. I'm seeing an odd (yet cross-browser consistant) behavior with layered block elements. As per the example, there are 3 divs: first one has a fixed height and width, its child has 100% height and width, plus a % padding on two sides, and its child is 100% height and width. The vertical padding is being calculated using the width. Is this some intentional quirk of border-box ? Is

问题 I have two parent elements, and 3 children inside. ( #grandParent>#parent>#children*3 ) grandParent has a set height and width, and parent has padding applied. All elements have box-sizing: border-box . With border-box applied, the padding should make the children smaller, but instead, it pushed it down, and retains its size. Why doesn't the children become smaller when the padding is applied? JSFiddle * { box-sizing: border-box; } #grandParent { width: 34px; height: 34px; } #parent { padding

问题 I've got the following code: * { box-sizing: border-box; } .container { width: 100%; max-width: 60rem; /* 960 */ margin: 0 auto; } .item { width: 100%; overflow: hidden; margin-bottom: 5rem; /* 80 */ } .item__img, .item__info { width: 50%; float: right; } .item__img {} .item__img .img-map { width: 95%; height: 18.750rem; /* 300 */ } .item__img img { width: 95%; height: 18.750rem; /* 300 */ } <div class="container" role="main"> <article class="item"> <div class="item__info"> <p>Lorem ipsum

问题 I have a list of inline-block elements, and I want to add a border to the element you hover over. However, notice how the border offsets the element, even when I use box-sizing: border-box and explicitly define the widths and heights of the elements. I illustrated the behavior below: * { box-sizing: border-box } ul { font-size: 0 } li { display: inline-block; width: 100px; height: 40px; margin: 10px; font-size: 20px; text-align: center; background-color: #FFF176; } li:hover { border: 5px

问题 When using box-sizing: border-box in CSS, I assume that the total width of an element will be defined in its "width" value. So if I say that the width of a division is 20px and the right border is 10px, I will end up with a box that takes up the space of 20px and half of it is the right border. Pushing it to the point where I set the width to 10px and the right border, too, like here: #box{ overflow: hidden; width: 10px; box-sizing: border-box; height: 100px; background: black; border-right:

问题 I will start developing a new website, and I'm getting ready to deal with the different methods browsers use to calculate width and height of elements (box model stuff). Somehow, it came to my mind: what if I just apply box-sizing to all elements in the website? I'm one of those who believe that box-sizing: border-box; is one of the best commands there is in CSS, with all its limitations. However, those same limitations are the ones who make me wonder if I should apply box-sizing to all