I have seen that box-sizing: border-box will avoid width calculation issue. I have doubt that why it is on * like
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
What is problem in defined like below.
body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Will not apply to all child elements? why?
It will be applied to all elements in the document instead of just the body element.
This way you don't need to add the box-sizing to all the style rules where you need the box-sizing.
Just be aware of that it may affect performance of the page using *. If you only need it for a few elements it is better to specify the box-sizing for those few instead.
" * " is universal CSS selector which means it selects all individual element on an HTML page.
Example-1:
Whenever you select body it only styles up the body (Remember only body not it's child).
HTML:
<body>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
</body>
CSS:
body {
padding: 5rem;
background-color: chocolate;
border: 2px solid white;
}
Result:
Padding, background, border applied only on body
Example-2:
Whenever you choose " * " It styles up all individual elements including body inside an HTML document.
HTML:
<body>
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
</body>
CSS:
body {
padding: 5rem;
background-color: chocolate;
border: 2px solid white;
}
Result:
Padding, background, border applied all individual elements including body
Related
Using the following HTML I need to:
Make sure that the border of target div (pink) is adjacent of the wrapper-target red border div.
Must work on any value of border-radius.
Considering that:
I am using box-sizing: border-box; but can be also reset to a default value.
I cannot change the border-radius property of the target div.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
</div>
</div>
NOTES:
I do not need to make a circle in this specific example :).
Part 1 of the problem: (Child becoming a round in original demo)
The problem is because of the box-sizing: border-box. When this is set, the defined height, width of the box (250 x 250px) is considered as inclusive of the width of the border and the padding. So, the element's actual content area is only 200px x 200px (excluding 50px for horizontal & vertical borders).
Thus the child div will only have a size of 200px x 200px (this can be verified in Dev tools). When a border-radius of 100px is inherited from parent, it becomes a round as that is half of its dimensions.
So, the border-radius cannot be inherited for the child if the shape has to be maintained. It should be set as 80px (approximate). (Initially I had mentioned that a value of 76px was working better and that I was trying to find out the reason for it - please refer to Part 2 for the reason.)
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target"
style="position:absolute;
top:100px;left:100px;
width:250px;height:250px;
border-radius:100px;
border:25px solid red;">
<div id="target"
style="position:relative;
width:100%;height:100%;
background-color:plum;
border-radius:76px;">
</div>
</div>
Part 2 of the problem: (even when border-box is removed, it leaves a gap)
This is because the assigned border-radius is the radius of the outer border and not that of the inner border. The inner border radius is calculated as outer border radius minus border thickness.
As per spec:
The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness.
So, the child's border-radius need to be equal to the inner border radius of the parent. That is, the child's border-radius should be 75px (100px - 25px thickness of border).
This is also why a border-radius of 76px worked better than the 80px as mentioned earlier. 76px is closer to 75px than 80px :)
Solution without changing border radius of target:
If border-radius: inherit on the child (target) cannot be changed then the only option is to make the child the same dimensions as parent (using calc), positioning it and then clipping the overflow in parent.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;
top:100px;left:100px;
width:250px;height:250px;
border-radius:100px;
border:25px solid red;
overflow: hidden;">
<div id="target" style="position:relative;
width:calc(100% + 50px);height: calc(100% + 50px);
top: -25px; left: -25px;
background-color:plum;
border-radius:inherit;">
</div>
</div>
Try adding same bg color of target div to main div.
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50px;border:25px solid red; background-color:plum;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit">
</div>
</div>
DEMO
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div id="wrapper-target" style="position:absolute;top:100px;left:100px;width:250px;height:250px;border-radius:50%;border:25px solid red;">
<div id="target" style="position:relative;width:100%;height:100%;background-color:plum;border-radius:inherit"></div>
</div>
Set value of border-radius in %, not in px, if you want to make a circle.
You inherit the border-radius with a fixed value while the child element has other dimensions. Calculate the border in percent. Use border-radius:40%; on your wrapper.
Maby this wil help. The css is now set in a external file.
The border-radius:inherit; checks the border-radius that is already there. so it sets to that border-radius.
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#wrapper-target {
position: absolute;
top: 100px;
left: 100px;
width: 250px;
height: 250px;
border-radius: 50px;
border: 25px solid red;
background-color: plum;
}
#target {
position: relative;
width: 100%;
height: 100%;
background-color: plum;
border-radius: inherit;
}
<div id="wrapper-target">
<div id="target">
</div>
</div>
Why is it that <input> and <select> fields are displayed in different sizes, even if formatted in the same way?
.classname fieldset input,select {
float: right;
width: 50%;
}
The <select> ends up a little smaller than <input>. - Here's a fiddle.
Try specifying box-sizing and reseting border values:
.classname fieldset input,select
{
float: right;
width: 50%;
-ms-box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px solid #AAA; /* Set your color here. */
}
As noted, you likely want to set box-sizing, however it should be set to border-box and not content-box, meaning you should also not need to change anything else:
.classname fieldset input,select {
float: right;
width: 50%;
box-sizing:border-box;
}
Box-Sizing:
The box-sizing CSS property is used to alter the default CSS box model
used to calculate widths and heights of elements.
border-box
The width and height properties include the padding and border, but
not the margin.
I have a <div>, with fixed height and padding. The border-box property is applied on the whole page. Inside the <div> I have an <img> with max-width:100%, and max-height:100% properties. My problem is the container is wider than excepted (I think because of the padding).
What is the best solution to add padding around the image without breaking the design OR how to fix it?
I saved it to JSFiddle (http://jsfiddle.net/4eo6bebj/) and I also added it to my question.
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
display:inline-block;
float:left;
padding:15px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/">
</div>
Update: The problem is visible in Firefox.
You could remove the padding from the div and add it into inner elements.
http://jsfiddle.net/6ux1wjLc/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#responsive-image {
height:150px;
border:1px solid red;
float:left;
}
#responsive-image * {
padding: 10px;
}
img {
max-width:100%;
max-height:100%;
}
<div id="responsive-image">
<img src="http://lorempixel.com/400/200/sports/" />
</div>
I am dividing my screen to 4 Quarters but it doesn't work with all screen resolutions.I need it to always be 4quarters even by changing the window size.
here is the code:
body{
height:800px;
}
div{
position:relative;
border:1px solid red;
width:49.7%;
height:49.7%;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
</style>
</head>
<body>
<div id="Q1"> </div>
<div id="Q2"> </div>
<div id="Q3"> </div>
<div id="Q4"> </div>
</body>
Use this CSS to make the height 100% and quarter it:
body{
height:100%;
}
html {
height: 100%;
}
div{
position:relative;
border:1px solid red;
width: 50%;
height: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#Q1,#Q3{
float:left;
}
#Q2,#Q4{
float:right;
}
The computed width of the boxes exceeds the total available space in lower screens. This is because the border of 1px around the elements.
You could give the div elements a box-sizing: border-box; declaration so that their width would be calculated including padding and borders.
Example Here
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
In addition, if you want to resize the height of the boxes with the respect to the height of the body, note to set height: 100% on body and html as well.
You have to specify the height of html to get height: 100% to work for the <body>. This because a percentage value of height property is relative to the height of box's containing block.
Updated Example Here
html, body {
height: 100%;
padding : 0;
margin : 0; /* Remove the default 8px margin around the body */
}
Also note that UAs apply a default margin to the <body> by default. Make sure you have reset the user agent stylesheet.
It's been a while since I really dealt with percentages in web design. I have a nested DIV which sits inside a container but the padding of the container pushes it beyond the 100% width. Without wishing to embark on a process of trial and error to see what makes it as close to 100% of the width as possible, how do I go about achieving a snug fit? I also noticed that when I resized the window and made the space smaller, the right hand padding simply got smaller.
<div id="block">
<div class="inside">ssdfsdfdfsfdf</div>
</div>
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
}
.inside {
height: 200px;
background-color: #333;
}
http://jsfiddle.net/AndyMP/cs2U9/4/
Use box-sizing css property for #block element.
#block {
width: 100%;
background-color: #CCC;
padding: 20px;
-o-box-sizing: border-box; /* Opera */
-ms-box-sizing: border-box; /* IE */
-moz-box-sizing: border-box; /* Mozilla */
-webkit-box-sizing: border-box; /* Chrome, Safari */
box-sizing: border-box;
}
About CSS box-sizing property: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I needed an
overflow: hidden
on the container DIV in order to get it to sit perfectly.
http://jsfiddle.net/AndyMP/cs2U9/6/