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 :)
Related
<div style=" height:0;
width: 0 ;
border: 1px solid black ; ">
This is all the code
And as you can see there is a strange white space inside my div . There should be a perfect black square but there is not . When i run this same code on firefox i get a black square without any empty space inside . As you can see in the image there is no overriding css . I have cleared my cache and set chrome settings to default but it did not worked . PLEASE explain what is happening and also tell whether you have a perfect black square or not .
I tested your code locally and I am not seeing any whitespace inside the div but when I zoomed in on my browser page I can see whitespace inside the div. The solution is for you to reset your browser zoom to normal or 100% in the browser settings to avoid seeing the space apart from that everything is working well.
You are not closing the div tag. What I would suggest is to apply the styles in the css - not as inline styles.
div {
height:0;
width: 0;
border: 1px solid black;
}
<div></div>
I would also question why you have a border on a div that is height and width 0. You can set the styles and apply classes that then shave the div as you want it.
.normal-height {
height: 20px;
width: 20px;
border: solid 1px black;
}
.no-height {
height: 0;
width: 0;
border: none;
}
<div class="normal-height"></div>
<hr/>
<div class="no-height"></div>
As you can see if you remove the height factor we cannot see any of the blank space if you want you can try it out
Hope it will be helpful
<div style=" width: 0 ;
border: 1px solid black ; ">
<\div>
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>
<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.
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.
Is there a way, when I have over lapping (touching) div's, to make the 1px border not become 2 pixels. And I know I could just put a border on 2 of the sides, but then the one edge of the div wouldn't have a border. By the way, I'm using jQuery Masonry.
yes the div on the right would look something like this
border: 1px solid #fff;
border-left: none;
the second border-left will override the left border that was just put on there
EDIT:
ok, since youre using jQuery masonary - do it like this
.container {
width:50px;
height:80px;
border:1px solid black;
margin-right: -1px;
margin-bottom: -1px;
}
the overlapping method I mentioned will work
Combining borders and margins (even with border-box) is tricky because your layout depends on the container width. It is better to add a child to the element positioned by Masonry and style that...
.container .post {
float: left;
width: 240px;
}
.container .text {
outline: 1px solid #999;
padding: 10px;
margin: 0 1px 1px 0;
}
outline allows the border to appear "outside" the div which makes them easier to overlap
http://jsfiddle.net/4xmUY/
(if you happen to use this answer please accept Scott's answer as this should be a comment on his answer but the explanation doesn't fit there).