As I understand box-sizing, box-sizing:border-box makes it so that
width = border-left-width + padding-left + <free space> + padding-right + border-right-width
At least, that is exactly what happens if I set
div {
box-sizing: border-box;
width: 200px;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div>170px free space</div>
So, from my understanding, width defines the "overall width" of the element. However, if the width is smaller than the sum of paddings+border-widths, weird things happen:
div, span, input {
box-sizing: border-box;
width: 0; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>
Divs behave as expected, spans seem to show everything "left" from the "<free space>", and inputs show everything (and just have a 0px "<free space>").
What explains this behavior?
Edit: span{display:block} makes the span behave as the div, which makes it at least a bit understandable. But input{display:block} does not have the same effect. Why?
div, span, input {
box-sizing: border-box;
width: 0;
display: block; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>
if you add a height to the elements you will see they are all the same.
div, span, input {
display: block;
box-sizing: border-box;
width: 0;
padding: 0 10px;
border: solid green;
border-width: 0 5px 0 5px;
background: #ebebeb;
height: 20px;
}
<div></div>
<br>
<span></span>
<br>
<input>
the "element" itself is 0 width, shown by the blue box
padding is 10px on both sides
border is 5px on both sides
resulting in a total box-sizing width of 30px
Related
HTML <textarea> shows dynamic text half its height when it first loads [when the page loads] like this:
When you focus and start typing or pushing left or right arrow keys, then it shows the text to its full height as it should like this.
How to make the dynamic text appear at its full height when it first loads without having to focus on the <textarea> and push right/left arrow keys? Here is the HTML and CSS codes:
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden"></textarea>
Thank you.
I think it is because the padding/margin you have added. Try running by removing the padding/margin and see if that works for you.
You want the height to include the padding and border size as you have used box-sizing so your height should be the size of the font plus top and bottom padding and border
In this case that is 55px (font) + 24px (12px top and 12px bottom padding) + 2px (border - you have no top and 2px bottom) = 81px
textarea {
height: 81px;
background-color: #009688;
font-size: 55px;
line-height:55px; /* added this just to ensure the line height is the same as the font size */
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">someText</textarea>
Please check the updated one. Added line-height and updated attribute to rows=1 instead of giving height to textarea.
textarea {
min-height: 55px;
background-color: #009688;
font-size: 55px;
line-height: 60px;
width: 100%;
padding: 0 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" rows="1" style="overflow:hidden"></textarea>
Just increase height as height and font-size is same:
textarea {
height: 80px;
background-color: #009688;
font-size: 55px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
Adjust font-size and padding like
padding: 12px 12px;
and
font-size: 40px;
Try this: I just remove the padding. You can also add the padding just add more height
Explanation:
The size of font and the height of textarea is the same PLUS you have a padding.
textarea {
height: 55px;
background-color: #009688;
font-size: 55px;
width: 100%;
/*padding: 12px 20px;*/
margin: 8px 0;
box-sizing: border-box;
border: none;
border-bottom: 2px solid white;
}
<textarea id="location" style="overflow:hidden">Prefilled</textarea>
So I have this code:
<h1 id="result" style="color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">
text
</h1>
How can I make a border that if I put a longer text in, my border will keep its position and change its size, to make my text still in the border? Thanks!
Just adding border: 1px solid black (for example) to what you have works perfectly fine. The h1 element will grow and shrink to fit it's content and the border will do so as well:
const result = document.getElementById('result');
const sentence = "HELLO! IT LOOKS LIKE THIS IS WORKING FINE...";
let index = 0;
setInterval(() => {
index = (index % sentence.length) + 1;
result.innerHTML = sentence.slice(0, index);
}, 250);
#result {
position:absolute;
top: 10%;
left: 10%;
padding: 0 .5rem;
font-family: Sans-Serif;
font-size: 2rem;
line-height: 3rem;
color: black;
border: 3px solid black;
border-radius: 3px;
min-height: 3rem;
}
<h1 id="result"></h1>
Anyway, I suspect you may be referring to the border changing your element's dimension:
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
}
<div id="bar1"></div>
<div id="bar2"></div>
That's because by default, your element's width and height are actually a sum of the specified width and height properties, plus padding plus border, as you can see from the example above.
If that's the case, you have two options to keep the dimensions just as specified with width and height:
Using box-sizing: border-box. That will make padding and border included in the element's total width and height.
Using box-shadow instead of border. You can use the inset property to draw the shadow to the inside of the element instead of to the outside.
#bar1 {
width: 50%;
height: 1rem;
background: red;
margin: .25rem;
}
#bar2 {
width: 50%;
height: 1rem;
background: cyan;
margin: .25rem;
border: 3px solid black;
box-sizing: border-box;
}
#bar3 {
width: 50%;
height: 1rem;
background: yellow;
margin: .25rem;
box-shadow: inset 0 0 0 3px black;
}
#bar4 {
width: 50%;
height: 1rem;
background: lime;
margin: .25rem;
box-shadow: 0 0 0 3px black;
}
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div id="bar4"></div>
Note the 4th bar, the one with the outer box-shadow looks bigger, but if you inspect it, its dimensions are exactly the same as those in the other 3 bars.
Can you just add border: solid 1px black; to the style attribute, like this?
<h1 id="result" style="border: solid 1px black; color:black; font-family: Bradley Hand; font-size:50px; position:absolute; top:17%; left:60%">text</h1>
Fiddle: https://jsfiddle.net/myingling/LL57yd8j/
Here's some reading on CSS borders: https://www.w3schools.com/css/css_border.asp
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also at http://jsfiddle.net/bh2f6/1/)
Is there a better solution for this?
Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.
Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.
Change your CSS to this:
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
See working jsFiddle demo
Something like this might work...
hr {
padding: 50px 0;
border: none;
&:before {
// full-width divider
content: "";
display: block;
position: absolute;
right: 0;
max-width: 100%;
width: 100%;
border: 1px solid grey;
}
}
http://codepen.io/achisholm/pen/ZWNwmG
HR Secret things, you must know.
When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.
<hr class="my-hr-line">
.my-hr-line {
position: relative;
left: -15px;
width: calc(100% + 30px);
height: 2px;
border: 2px solid blue;
}
Hope it will help many one.
Removing Padding should work for you
Working Example
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
You mean like this?
Fiddle
just change the padding to padding: 20px 0;
I have some floating elements on a page.
What I want is the div that is floated left to be "maximally wide" so that it is as wide as it possibly can be without causing the red div ("I go at the right") to spill over onto the next line.
An example is here: The width:100%; doesn't produce the desired effect!
** I don't want the green element ("I want to be as wide as possible") to go "under" the red element. Its very important that they both stay separate i.e. .. I think they must both be floated!
<div class="container">
<div class="a1">i go at the right</div>
<div class="a2">i want to be as wide as possible,</div>
<div class="clear"></div>
</div>
<style>
div
{
border: solid 2px #000;
background-color: #eee;
margin: 8px;
padding: 8px;
}
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 12px;
padding: 6px;
}
div.a2
{
float: left;
/*width: 100%;*/ /*this doens't produce desired effect!*/
background-color: #0b0;
border: solid 2px #0f0;
margin: 12px;
padding: 14px;
}
.clear
{
border: none;
padding: 0 ;
margin: 0;
clear:both;
}
</style>
Work with percentages:
div.a1
{
float:right;
background-color: #a00;
border: solid 2px #f00;
margin: 2%px;
padding: 6px;
width: 8%;
}
div.a2
{
float: left;
width: 84%;
background-color: #0b0;
border: solid 2px #0f0;
margin: 2%px;
padding: 14px;
}
Play with the widths, heights and margins % to get the desired look. Just remember that margin: sets right and left margins therefore margin: 2% uses 4% of the wrapper's width. Margins + widths should sum 100%, in this case (2%*2)*2 + 84% + 8% = 100%.