+ 1
Imma Dummy :v
I've just started learning and experimenting with HTML and CSS (on way to learn JavaScript!! yay! ヽ(*≧ω≦)ノ). I was trying to place two float divs at the side of each other, taking each 50% of the page. In the css I wrote: float: right/left; border: thin solid black; width: 50%; I just spent a hole 90mins trying to see why the dibs never aligned each other, not realizing that the thin border ads another 1px to the dib-box. I erased the border value. And it was fixed.... I am a dummy 😂😂
4 Antworten
+ 14
hehe, don't worry, keep experimenting 👍 good thing you were able to solve it 😊
This happens because the default value of the width and height properties of browsers is set to content-box.
So another way to solve this issue is by using the CSS box-sizing property. With it you can tell the browser that the sizing properties (width and height) should include the border-box. Like this:
div {
border: 1px solid;
box-sizing: border-box;
}
With that code you're specifying that all <div> elements should have border (and also padding) included in the element's total width and height 😊
+ 10
No,Test everything is like "self-teaching"
You are not "dummy"
+ 8
You is smart. Figured it out all by yourself
+ 1
:v!