When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.
Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/
HTML:
<div class="container">
<canvas width="200" height="100"></canvas>
</div>
<div class="container">
<canvas id="block" width="200" height="100"></canvas>
</div>
CSS:
.container {
border: 1px solid blue;
}
canvas {
border: 1px solid red;
}
#block {
display: block;
}
Output:
For anyone wondering what the gap actually is:
As ThinkingStiff mentions, these are inline elements. That means that by default they will try to align themselves with the baseline of text. If you had some adjacent text, it would be easier to see what's happening.
The amount of space left below the svg is the size of a descender at the current font-size. This is why Teg's solution only works for the default font-size. The default font-size is 16px and 4px of that is dedicated to the descender. If you increase the font-size, the descender will also increase.
See the same piece of DOM using font-sizes of default (16px), 50px and 0px;
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}
<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>
Margin -5px is working in Firefox.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas>
</div>
</body>
</html>
Related
I am trying to make a row which is displayed in image .Actually my circle is not on right side and my “P” is not getting background color.Here is my code
http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview
can we give row height in percentage ?
actually I need my row should look like as shown in image
![<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<style>
.brd {
border: 1px solid red;
}
</style>
<body ng-app="">
<div class="list card">
<div class="item item-avatar">
<div style="border: 1px solid red;float: left;background: gray;">P </div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
</div>
</div>
</body>
</html>
Update Plunker here: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview
Edit: In light of the responsive requirement I have changed the plunker to use viewport settings. This will take up 100% of the width AND set the height of the items inside it to remain in proportion. As for the text I'm not sure you can do that with pure css.
<div class="">
<div class="" style="height: 30vw; position:relative; width: 100%;">
<div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
<div style=" position:relative; top:40%;">P</div>
</div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
<div style=" position:relative; top:30%;">650</div>
</div>
</div>
I assume you will be moving all this inline css to separate files though...
I'm using bootstrap version 3.0.1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders, I get a thicker border.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>
And this is what I get .
How can I use the border without the adjoining rows adding up their borders?, ie: I want all rows with a border of 1px.
Thank you
You can remove the border from top if the element is sibling of the row .
Add this to css :
.row + .row {
border-top:0;
}
Here is the link to the fiddle http://jsfiddle.net/7cb3Y/3/
Here is one solution:
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}
I'm not 100% its the most effiecent, but it works :D
http://jsfiddle.net/aaronmallen/7cb3Y/2/
On my projects i give all rows the class "borders" which I want it to display more like a table with even borders. Giving each child element a border on the bottom and right and the first element of each row a left border will make all of your boxes have an even border:
First give all of the rows children a border on the right and bottom
.borders div{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
Next give the first child of each or a left border
.borders div:first-child{
border-left:
1px solid #999;
}
Last make sure to clear the borders for their child elements
.borders div > div{
border:0;
}
HTML:
<div class="row borders">
<div class="col-xs-5 col-md-2">Email</div>
<div class="col-xs-7 col-md-4">my#email.com</div>
<div class="col-xs-5 col-md-2">Phone</div>
<div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
you can add the 1px border to just the sides and bottom of each row. the first value is the top border, the second is the right border, the third is the bottom border, and the fourth is the left border.
div.row {
border: 0px 1px 1px 1px solid;
}
You can simply use the border class from bootstrap:
<div class="row border border-dark">
...
</div>
For more details visit the following link: Borders
How to add a border or frame around both the figure including its caption?
I tried to use style for figure, but no border shows up. I do not want border around img, but around both figure and caption if any.
<!DOCTYPE HTML>
<html lang="en">
<body>
<figure style="border-width:thin">
<img src="image.png">
<figcaption>my image</figcaption>
</figure>
</body>
</html>
For some unknown reason, the predefined value of the border-width is not working. See the CSS code below:
figure {
border: 1px solid #000;
padding: 5px;
}
Or you can do this:
<figure style="border: 1px solid #000">
<img src="http://placehold.it/220x180.png">
<figcaption>my image</figcaption>
</figure>
Whichever is easier, take your pick.
Demo:
http://jsfiddle.net/jlratwil/gNFpv/4/
<!DOCTYPE HTML>
<html lang="en">
<style>
.frame{
border: 1px solid #000; /*outside border*/
padding: 10px; /* creates whitespace between border & content */
</style>
<body>
<figure class="frame">
<img src="image.png">
<figcaption>my image</figcaption>
</figure>
</body>
</html>
I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
If that's the case, use this:
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
Maybe like this, with margin-left
http://jsfiddle.net/ppMmy/
The CSS padding properties define the
space between the element border and
the element content.
Thus not "padding" the whole <div>
Is there an elegant way to align 3 elements left, center, and right on the same line?
Right now I'm using 3 <div>'s all with width:33%;float:left; and it's not working too well.
that works for me:
<html>
<head>
<style>
div.fl {
float: left;
width: 33%;
}
div.fr {
float: right;
width: 33%;
}
</style>
</head>
<body>
<div class="fl">
A
</div>
<div class="fl">
B
</div>
<div class="fr">
C
</div>
</body>
</html>
do you mean the same?
You may get strange results if there is any margin in the element you are adding it to. This is where width: 33% may not work because you will need to factor in the amount of margin that element has.
<html>
<head>
<title></title>
<style type="text/css">
div { float: left; width: 33%; margin: 4px; }
</style>
</head>
<body>
<div style="border: 1px solid #ff0000;">1</div>
<div style="border: 1px solid #00ff00;">2</div>
<div style="border: 1px solid #0000ff;">3</div>
</body>
</html>
This will cause it not work as expected because of the margin added to each div. Similarly, if you add too much of a border to each div you will get a similar result border: 5px solid !important;
As soon as you take away the margin from the above code, it should work as expected.
Try this:
<div style="float: left; width: 100px;">
left
</div>
<div style="float: right; width: 100px;">
right
</div>
<div style="width: 100px; margin: 0 auto;">
center
</div>
You need to take into account that the left and right divs do not push the container box (a div around the code above) height down, even if they have more content than the center div, the only one not floated. A clearfix will take care of this.
I created a page with all three methods for comparison at http://www.salestime.com/Ref/LeftCenterRight.html.
Float the first two left and float the third one right, while ensuring the widths will fit the line you are placing them on.
Use pixel widths if your design allows for it.
Float LeftBlock 'left', CenterBlock 'none' and RightBlock 'right'. But make sure the Center element appears last on your HTML page, otherwise it wont work.
Here is yet another varition of the theme:-
<html>
<head>
<style type="text/css">
div div {border:1px solid black}
div.Center {width:34%; float:left; text-align:center}
div.Left {float:left; width:33%; text-align:left}
div.Right {float:right; width:33%; text-align:right}
</style>
</head>
<body>
<div class="Left"><div>Left</div></div><div class="Center"><div>Center</div></div><div class="Right"><div>Right</div></div>
</body>
</html>
Note that the border is possible by using an inner div for each of the 'panel' divs. Also gives the center the remain 1% of pixels.
This works for me. I don't know if it's the most elegant, but it does do the work: it reacts well to the "cell" contents and resizing.
<html>
<head>
<style>
.a {
border: 1px dotted grey;
padding: 2px;
margin: 2px;
}
.l {
border: 1px solid red;
background-color: #fee;
float:left;
}
.c {
border: 1px solid green;
background-color: #efe;
text-align:center;
}
.r {
border: 1px solid blue;
background-color: #eef;
float:right;
}
</style>
</head>
<body>
<div class="a">
<div class="l">
</div>
<div class="r">
toto v.2 adfsdfasdfa sdfa dfas asdf
</div>
<div class="c">
item 1 | tiem 2 | asdf 3 | asdfad asd | aasdfadfadfads
</div>
</div>
</body>
</html>