CODEWITHSUNDEEP
htmlcsspercentage
Daci
Daci

Reputation: 27

Double square in CSS

I try to create 19 squares, the first double size.

Regular square: width: 9.09%; padding: 2.27% 0;. So, I used for the first width: 18.18%; padding: 4.54% 0;. But doesn't have double height than the others.

Here's a JSFiddle.

Which would be the right percentage for padding? And why is not 4.54?

Upvotes: 0

Views: 496

Answers (4)

rfinster
rfinster

Reputation: 68

Because doubling the padding only doubles the padding. Box model says: visual height = height-content + height-padding + height-border

I recommend you to user border-box as box-sizing model and explicitly set the height of your buttons: e.g.:

.buttons { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; /*Cross-Browser-prefixes */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.button {
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    float: left;
    width: 2rem;
    height: 2rem;
    background: maroon;
}
.double {
    width: 4rem;
    height: 4rem;
    background: red;
}

http://jsfiddle.net/usj9u2je/1/

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106078

your forgot to mind the line-height used by your text.

You may reset it to 0: http://jsfiddle.net/ooLzq85o/1/

.button {
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    float: left;
    width: 9.09%;
	padding: 4.5% 0;
    background: maroon;
    line-height:0;
}
.double {
    width: 18.18%;
	padding: 9% 0;
    background: red;
}
<div id="buttons">
    <div class="button double">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">10</div>
    <div class="button">11</div>
    <div class="button">12</div>
    <div class="button">13</div>
    <div class="button">14</div>
    <div class="button">15</div>
    <div class="button">16</div>
    <div class="button">17</div>
    <div class="button">18</div>
    <div class="button">19</div>
</div>

Upvotes: 1

Guffa
Guffa

Reputation: 700910

There is no padding in percent that will make the larger square twice as high as the regular squares.

A regular square is one character block high, plus 4.54% of the parent element width. For the larger square to be twice as high, it needs to be two character blocks high, plus 9.08% of the parent element width.

If you put two lines in the block, and set the padding to 4.54% 0, the larger block will always be twice as high as the regular blocks:

http://jsfiddle.net/Guffa/ooLzq85o/3/

If you don't want two character lines in the larger block, then you need to set the line height of the regular blocks, so that you can use double that in the larger block:

http://jsfiddle.net/Guffa/ooLzq85o/4/

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115383

You could use viewport units instead.

.button {
    width: 9.09vw;
    height: 9.09vw;
}
.double {
    width: 18.18w;
    height: 18.18vw;
    background: red;
}


.buttons {overflow: hidden; }
.button {
	color: #fff;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	float: left;
	width: 9.09vw;
    height: 9.09vw;
	background: maroon;
}
.double {
	width: 18.18w;
	height: 18.18vw;
    background: red;
}
			<div id="buttons">
				<div class="button double">
					1
				</div>
				<div class="button">
					2
				</div>
				<div class="button">
					3
				</div>
				<div class="button">
					4
				</div>
				<div class="button">
					5
				</div>
				<div class="button">
					6
				</div>
				<div class="button">
					7
				</div>
				<div class="button">
					8
				</div>
				<div class="button">
					9
				</div>
				<div class="button">
					10
				</div>
				<div class="button">
					11
				</div>
				<div class="button">
					12
				</div>
				<div class="button">
					13
				</div>
				<div class="button">
					14
				</div>
				<div class="button">
					15
				</div>
				<div class="button">
					16
				</div>
				<div class="button">
					17
				</div>
				<div class="button">
					18
				</div>
				<div class="button">
					19
				</div>
			</div>
		</div>

Upvotes: 0

Related Questions