Remove white space after Scale [duplicate] - html

Question

This question already has answers here:
White space around css3 scale
(12 answers)
Closed 7 years ago.
I have a little problem with scale transformation. I wish resize element, but when I do, my old size occupies the space, and the next element undergoes this old size. How to remove this constraints ?
HTML
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
<!-- Whitout Scale -->
<div></div>
<div></div>
CSS
div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }
div {
width: 100px;
height: 100px;
}
.scale {
transform: scale(0.5);
transform-origin: top left;
}
JSFiddle: https://jsfiddle.net/c7d2s21y/
Thank you for your response.

Answer 1

var scaleTo = 0.5,
itemWidth = $('.scaleB').width(),
itemHeight = $('.scaleB').height()
;
function scaleThis(meausure) {
var output = meausure * scaleTo;
return output;
}
$('.scaleB').on({
'mouseover': function(event) {
$(this).css({
'width' : scaleThis(itemWidth) + 'px',
'height' : scaleThis(itemHeight) + 'px'
});
},
'mouseout': function(event) {
$(this).css({
'width' : itemWidth + 'px',
'height' : itemHeight + 'px'
});
}
});
.wrapper {
background-color: #cccccc;
}
.wrapper:after {
content: "normal";
}
.wrapperScale {
background-color: #dddddd;
}
.wrapperScale:after {
content: "wrapped";
}
.wrapper_jQuery:after {
content: "jQuery";
}
.wrapper div:nth-of-type(even),
.wrapperScale div:nth-of-type(even) {
background: blue;
}
.wrapper div:nth-of-type(odd),
.wrapperScale div:nth-of-type(odd) {
background: red;
}
.scale, .wrapperScale div, .scaleB {
width: 50px;
height: 50px;
}
.scale:hover, .wrapperScale:hover {
transform: scale(0.5);
transform-origin: top left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
</div>
<!-- Whitout Scale -->
<div class="wrapper wrapperScale">
<div></div>
<div></div>
</div>
<!-- jQuery -->
<div class="wrapper wrapper_jQuery">
<div class="scaleB"></div>
<div class="scaleB"></div>
</div>
That's that CSS transformations actually do, it doesn't affect the surrounding elements, you can try to wrap the DIVs inside another element and apply the scaling to that element, but it will not affect other elements outside, just the contents, other than that, you will have to manipulate the actual sizes from your DIVs via java Script or a js library such as jQuery.

Answer 2

You try this code i hope work for you :
<style>
div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }
div {
width: 100px;
height: 100px;
}
.scale {
transform: scale(1);
transform-origin: top left;
}
</style>