<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#Tri{
width:0px;
height:0px;
border-top: 50px solid yellow;
border-right:50px solid red;
border-bottom:50px solid green;
border-left:50px solid blue;
}
</style>
</head>
<body>
<div id="Tri"></div>
</body>
This is the code to draw four triangles, what I can't get it is that in this code, div's width is 0px but its border is 50px, how can it be?
Good question. Here's an illustration of the CSS box model:
(source: w3schools.com)
If you leave your content (meaning height and width) to 0, your border can still exist. Learn more about the CSS box model at W3Schools.com.
Because the width and height style only controls the inner width and height of the html element. While the border weight controls the outer part of the HTML element.
This one interprets that there is no space for the content
#Tri{
width:0px;
height:0px;
border-top: 50px solid yellow;
border-right:50px solid red;
border-bottom:50px solid green;
border-left:50px solid blue;
}
While this one interprets that there is space in the content that is why it stretches since the div element occupies the available width available.
#Tri{
border-top: 50px solid yellow;
border-right:50px solid red;
border-bottom:50px solid green;
border-left:50px solid blue;
}
Reffering to the css box model.
Margin is applied first, to distance the element to the other objects in the html document. Border is then applied in which based on the example of the 4 colored triangles which are borders is displayed. Padding would then be applied to distance the content from the border and lastly the element content in which you set the it's style to width:0px and height:0px is only applied inside the border.
The "box model" in CSS is actually:
width + padding + border = actual width of box
height + padding + border = actual height of box
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
You can manipulate the box-model by specifying box-sizing.
box-sizing: border-box;
should achieve the effect you want. It is also how Internet Explorer (used to?) apply the box-model.
Related
Consider the following HTML and CSS
.outer {
border: 1px solid red;
margin-left: -10px;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
Where is that 1px extra spacing on the left, between the inner and outer div, coming from?
Change the negative margin to -11px, and it works as it should (no gaps).
You can also remove all the margins and compare with the "negative + positive" scenario above, to see how the two are not the same.
Thank you.
EDIT
After figuring it out, I just wanted to share the below in case helpful to future visitors.
The inner div is back to the exact spot it was when it started, after applying the -/+10px. It is just that the border that used to be in between the content edge of the body element, and the margin edge of the inner div (i.e. outer div's border) has shifted 10px to the left together with outer div. Thus, it works as it should without any oddities.
Margins of a child box naturally apply from the content edge of its parent box. That is how the box model should work. It is not possible to change that behavior with box-sizing: border-box
Possible solutions to the eliminate gap include (but are not limited to):
Converting the CSS to SCSS, storing the border width in a variable and subtracting that variable from parent's margin. (It was not necessary to convert to SCSS and use a variable, but it make the style sheet much easier to maintain and update.)
Eliminating the need for a negative margin altogether with JavaScript
Using outline instead of border on the parent div
I think it has to do with the .outer border. You can see below that when the red border is moved 10px to the left, there is a gap where it would have been if it wasn't moved to the left (when the margin is 0).
And because the .inner div is relative to the .outer div, it doesn't 'fill up' that 1px gap it creates by moving .outer 10 pixels to the left.
Here you can see the gap. (It looks like 2 pixels because the page is zoomed in by 200%)
Edit with extra info:
Extra "proof" to show that the extra space comes from the .outer div,
if you remove the 1px width of the .outer border, you also remove the gap:
Sorry for wrong answer, i was writing in a rush... the math:
(-10pxMargin + 10pxMargin + 1pxBorder) = 1
you need
(-11pxMargin + 10pxMargin + 1pxBorder) = 0
let me know if this is clear enough, the thing is that margin doesnt include borders.
That extra pixel is from the .outer element.
.outer {
margin-left: -10px;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
Instead of using border fothe outer element. You can use outline for it.
.outer {
outline: 1px solid red;
}
.inner {
border: 1px solid black;
width: 50px;
margin-left: 10px;
}
body {
border: 1px solid blue;
}
<div class="outer">
<div class="inner">
inner
</div>
</div>
So I'm trying to create an A4 page. Let's just say the margin of the page is 50px for now. The whole document (A4) is 300x300 pixels in my example:
https://jsfiddle.net/pfs01ucw/
What I get is this:
What I want is something like this:
I simply want to set a fixed container's width and height, add some margin and make the wrapper inside fill the entire space. If I add padding: 50px to the #container DIV, the height and size will increase by 50px on all sides (basically making it 400x400 pixels instead).
How do I achieve this?
box-sizing: border-box;
The width and height properties include the content, the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.
MDN - box-sizing - CSS
Fiddle
<div id="container">
<div id="wrapper">
</div>
</div>
<style>
#container {
border: 1px solid #000;
height: 300px;
padding: 50px;
width: 300px;
}
#wrapper {
border: 4px solid #000;
height: 100%;
}</style>
I am new to HTML programming. Is it possible to make a border to the margin instead of the padding? I need this just for design purposes only.
Is it possible to make a border to the margin instead of the padding?
Yes. The closest way I can think of to achieve this effect is using the CSS background-clip property:
background-clip: padding-box;
This clips any backgrounds in the element not to be rendered in the border region, thus treating it like a margin rather than padding.
Below is an example of the difference:
div {
border: 5px dashed #000; /* to see through border */
background-color: #0FF; /* to show extent of background */
padding: 5px;
margin: 10px;
}
.adjusted {
background-clip: padding-box; /* corrects extent of background */
}
<div>Default Border</div>
<div class="adjusted">Corrected Border</div>
In the "corrected" div, the border becomes part of the margin visually rather than part of the padding.
Make your padding the size your your current padding + margin, then set your margin to 0 pixels. This will have the same effect.
I don't think this is possible but if you want to enclose the margin within a border then there can be a workaround.
Enclose the element with span and set the border for that span element as,
.inner{
padding: 5px;
margin: 5px;
}
.outer{
border: 1px solid black;
}
<div class="outer">
<p class="inner">Hello</p>
</div>
Here is a demo
I have the following situation and a don't want to use JS for this:
There is a header (blue) then a div which might contain content (if not it should collapse completly) and then the body (gray).
Now I want to div with the green border left and right to fill the whole gap between the header and the body. The gap is caused by margin: 10px; on the div with the red border.
The only "solution" I have found so far is to set padding: 1px 0; to the div with the green border (see commented line in fiddle). Is there any better solution to force the div or the border to cover the whole height occupied by the child and collapse completly if there is no child?
I have no control over the content inside the div, so not using margin is not a solution.
Fiddle: http://jsfiddle.net/w5NW4/1/
I guess you are looking like this :- DEMO
Give the overflow:hidden to your banner class for achieving the desired result..
CSS
.banner {
border-left: 1px solid #008000;
border-right: 1px solid #008000;
overflow: hidden;
}
You can try using overflow: auto; property instead of using padding.
It will work.
Check it at Fiddle: http://jsfiddle.net/w5NW4/3/
.banner{
border-left: 1px solid green;
border-right: 1px solid green;
overflow: auto;
}
Another solution is to give padding: 10px; to .banner and removing margin: 10px; from the banner child element.
Working Fiddle
Also, try to avoid inline stylings.
I want to create border-bottom. And I try this
<div class="borderblog"></div>
.borderblog{
border-bottom: 1px dotted black;
}
but this only work if i put some text in that div. like this
<div class="borderblog">text</div>
and i don't want to put any text there. I only want to have one line dotted border bottom.
I also try to use HR tags but it don't work.
Demo in jsFiddle
set height and width
.borderblog{
border-bottom: 1px dotted black;
width:20px;
height:1px;
}
DEMO
You can set div height to one like:
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Div is block element and if it doesn't have any context the height is 0 and border is not visible because border is inside div. Width is not needed, since block element fills parent (container) width as default.
div does not have any height width by default, unless you specify it
so when you add text it gets some value and is shown, so the bordering is applied
.borderblog{
height: 1px;
border-bottom: 1px dotted black;
}
Well, it works for me on IE8, FF9 and Chrome32.
However, you can use <hr> element to create the dotted line as follows:
<hr class="borderblog">
.borderblog {
border: 0; /* <-- Reset the useragent stylesheet at first */
border-bottom: 1px dotted black;
}
WORKING DEMO.
Also, If you need a solid border and if by any reason the previous approaches didn't work for you, you can use background color for a 1px-height div
.borderblog {
height: 1px;
background-color: black;
}
Demo.
In this case you can add a border-bottom as well, to make it 3D visually.
Updated Demo.
All you have to do, just put height and width in css:
.borderblog{
width:100px; //depends what width border you want
height:1px; //depends what height you want, 1px is enought for border only
border-bottom: 1px dotted black;
}
And this is it, no need for text within :)