CSS - Ширина и высота установочного элемента до нуля

Question

Имейте div с заполнением 30px, шириной и высотой 100px. Размер коробки устанавливается в рамку. При попытке установить ширину и высоту в ноль она не работает. Элемент остается при 60px X 60px. (Даже с переполнением, скрытым).

Любая идея, что здесь происходит? Есть ли способ сделать ширину и высоту равными нулю, включая прокладки, чтобы они полностью разрушались?

.test { 
 
    padding: 30px; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-sizing: border-box; 
 
    background-color: orange; 
 
    overflow: hidden; 
 
} 
 
    
 
/* Setting width and height to zero. */ 
 
.test { 
 
    width: 0; 
 
    height: 0; 
 
}

<div class="test"></div> 
 
<p>Have a div with padding of 30px and width and height of 100px. Box sizing is set to border box. When trying to set the width and height to zero, it does not work. Element stays at 60px X 60px dimensions. (Even with the overflow set to hidden).</p> 
 
<p>Any idea what's going on here? Is there any way to make the width and height to zero including the paddings, so that it collapses completely?</p>

Answer 1

обивка также включают в высоту и ширину прокладки: 30px среднее 30px слева, справа, сверху, а также от нижней ITS означает, что ваш DIV фактический размер 460X460, поэтому вы должны удалить обивка также в течение записи CSS

.test { 
    width: 0; 
    height: 0; 
    padding:0; 
} 

.test { 
 
    padding: 30px; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-sizing: border-box; 
 
    background-color: orange; 
 
    overflow: hidden; 
 
} 
 
    
 
/* Setting width and height to zero. */ 
 
.test { 
 
    width: 0; 
 
    height: 0; 
 
    padding:0; 
 
}

<div class="test"></div> 
 
<p>Have a div with padding of 30px and width and height of 100px. Box sizing is set to border box. When trying to set the width and height to zero, it does not work. Element stays at 60px X 60px dimensions. (Even with the overflow set to hidden).</p> 
 
<p>Any idea what's going on here? Is there any way to make the width and height to zero including the paddings, so that it collapses completely?</p>

Answer 2

Согласно CSS box model, прокладка находится в пределах границы. Таким образом, это нормальное поведение. Если вы хотите, чтобы показать padding только тогда, когда содержание присутствует, вы можете удалить элемент, если содержание пусто, используя :empty

.test { 
 
    padding: 30px; 
 
    width: 400px; 
 
    height: 400px; 
 
    box-sizing: border-box; 
 
    background-color: orange; 
 
    overflow: hidden; 
 
} 
 
/* Setting width and height to zero. */ 
 

 
.test { 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.test:empty { 
 
    display: none; 
 
}

<div class="test"></div> 
 
<div class="test">Test</div>

Answer 3

Вы добиться того, что вы хотите с «один вызовом», как это:

$('.test').css({ 'width': '0', height: '0', padding: '0' }); 

Ваша проблема в дополнении в сочетании с рамкой. В качестве альтернативы вы можете использовать отображение: нет, видимость: скрытая или непрозрачность: 0