I am having issues at work today and I am trying to responsively spread these 3 text boxes across the screen, one to the left maybe with a little padding pushing away from the left, one in the centre, and one to the right and also with padding pushing away from the right.
I have used many solutions, the reason this doesn't work when it works on my screen every time is because it goes through IE HTML and then gets displayed on an email so it must go through a specific conversion.
I have a feeling that this could also be an older/outdated version of HTML as everything is purely HTML based.
<div class="awards" style="display: flex; float: float;">
<div>silver</div>
<div>gold</div>
<div>platinum</div>
</div>
Here is the text boxes, I will try what you guys come up with / recommend, thanks.
Even to this day, CSS Flexbox support is not universally supported across email clients and the most reliable method is a three column table with 33% width on the cells.
<style>
.table-awards {
width: 100%;
}
.table-awards td {
border: 1px solid black;
width: 33%;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
<tr>
<td class="gold" style="padding-left: 10px;">Silver</td>
<td class="silver" style="padding: 0 10px;">Gold</td>
<td class="platinum" style="padding-right: 10px;">Platinum</td>
</td>
</table>
If you were going to do it with flex it'd be something like:
<style>
.awards {
display: flex;
justify-content:space-evenly;
}
.awards > div {
border: 1px solid black;
flex: 1;
}
.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
<div class="gold" style="margin-left: 10px;">silver</div>
<div class="silver" style="margin: 0 10px;">gold</div>
<div class="platinum" style="margin-right: 10px;">platinum</div>
</div>
Related
I'm an experienced .net developer, but all of us have areas where we can benefit from improvements. I feel that I'm severely lacking in HTML/CSS skills and I'm trying to teach myself in this area.
I'm trying to create an HTML layout for an application that monitors bandwidth consumption on the local network. I envisage the layout as consisting of 4 elements:
+--------------------------+
+ Controls +
+--------+-----------------+
+ Legend + Graph +
+ + +
+ + +
+ + +
+ + +
+--------+-----------------+
+ Log +
+--------------------------+
Controls - this is a narrow area that will allow clear, pause and otherwise control the graph. It will also allow to show and hide log area. This means that the layout need to accommodate the log area being hidden.
Legend - is a table that will list all series on the graph. It will show series color and also some numeric data associated with the series. If there are more lines in the legend that fit the screen it should be possible to vertical scroll legend area. Horizontal scroll is never required for the area it's assumed that it is always narrow enough. The height of Legend (and Graph) should take up all the remaining space that is not used by Control area and Log area. The width of the legend will be equal to the natural table width.
Graph - there will be a Graph here painted over HTML canvas. This should take up all available space both horizontally and vertically.
Log - here will be two or three lines of log displayed. If there are more than 3 lines to display there should be a vertical scroll bar on this area. This area need to be able to be hid-able. The height of this area can be made fixed. (in the vicinity of 100px - 200px).
The layout should adapt to window re-sizing, and keep looking descent when windows is being made small (to a point of course). Unless the window is too small, it should not have outer horizontal and vertical scrollbars.
Unfortunately, I cannot get it right in several places.
This is my code:
<html>
<head>
<style>
* {margin:0;padding:0;height:100%;}
html, button, input, select, textarea {
font-family: sans-serif;
font-weight: 100;
letter-spacing: 0.01em;
}
.container {
min-height:100%;
position:relative;
}
.control {
background:green;
width:100%;
height:auto;
margin-top: 0;
}
.content {
width:100%;
margin:0;
margin-top:0;
margin-bottom:0;
}
.legend {
position:relative;
background:blue;
float:left
}
.graph {
background:red;
}
.log {
background:yellow;
width:100%;
height:auto;
position:absolute;
margin-top: 0;
margin-bottom: 0;
bottom:0;
left:0;
}
.table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.table td,
.table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em;
}
.table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.table td {
background-color: transparent;
}
.table-odd td {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<div class="control">header1<br/>header2</div>
<div class="content">
<div class="legend">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr class="table-odd">
<td style="background-color: #FFB300">1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td style="background-color: #803E75">2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr class="table-odd">
<td style="background-color: #FF6800">3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
<tr>
<td style="background-color: #A6BDD7">4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
</tr>
<tr class="table-odd">
<td style="background-color: #C10020">5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
</tr>
<tr>
<td style="background-color: #CEA262">6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
</tr>
<tr class="table-odd">
<td style="background-color: #817066">7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
</tr>
<tr>
<td style="background-color: #007D34">8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
</tr>
</tbody>
</table>
</div>
<div class="graph"><canvas></canvas></div>
</div>
<div class="log">log1<br/>log2</div>
</div>
<script>
function resize() {
var canvas = document.querySelector('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx = canvas.getContext('2d');
ctx.strokeStyle='yellow';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(canvas.width,canvas.height);
ctx.stroke();
}
resize();
window.addEventListener('resize', resize, false);
</script>
</body>
</html>
This is the corresponding JSFiddle
Particular problems that I'm facing:
Why canvas is being rendered outside of the enclosing div? This is very surprising to me and I cannot figure out why.
How do I make the table be spaced out naturally? In particular:
Why first line is so tall?
How do I make the table do not take the whole height? It's enclosing dive that has height:100%, not the table, so why is it so tall?
How do I make it scroll-able if it's does not fit in the height?
The Legend/Graph area seems to extend underneath the Log area. Why? How do I prevent that?
Finally, how can I make the Log area of fixed height and scroll-able?
My apologies, I know that this question is a tall order, I'll gratefully accept any help and/or pointers. I do realize that I lack basic understanding, but that's what I'm trying to work against. I spent most of the evening today researching this topic and looking for source that allowed me to put together at least this non-working example. I'm comfortable with JavaScript, it's HTML/CSS that I mainly need help with. I studied the documentation on what properties of different DOM objects do, but it's difficult to figure out what properties to use and how.
You are complicating your CSS a lot for what you want,
you can use CSS Flexbox along with CSS calc() for this
body {
margin: 0
}
section {
background: red;
height: 50px;
}
article {
display: flex;
height: calc(100vh - 100px)
}
aside,
div {
background: lightblue;
}
aside {
overflow-y: auto;
max-width: 45%
}
aside ~ div {
flex: 1
}
canvas {
width: 100%;
height: 100%;
background: green
}
.table {
display: table;
table-layout:fixed;
width:100%
}
.row {
display: table-row;
background-color: #fff;
}
.column {
display: table-cell;
vertical-align: top;
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
padding: 0.5em 1em;
background-color: inherit;
}
.cell-header {
font-weight: bold;
}
.row-odd {
background-color: #f2f2f2;
}
<main>
<section>Controls</section>
<article>
<aside>
<div class="table">
<div class="row row-odd">
<div class="column cell-header">#</div>
<div class="column cell-header">Make</div>
<div class="column cell-header">Model</div>
<div class="column cell-header">Year</div>
</div>
<div class="row">
<div class="column" style="background-color: #FFB300">1</div>
<div class="column">Honda</div>
<div class="column">Accord</div>
<div class="column">2009</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #803E75">2</div>
<div class="column">Toyota</div>
<div class="column">Camry</div>
<div class="column">2012</div>
</div>
<div class="row">
<div class="column" style="background-color: #FF6800">3</div>
<div class="column">Hyundai</div>
<div class="column">Elantra</div>
<div class="column">2010</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #A6BDD7">4</div>
<div class="column">Ford</div>
<div class="column">Focus</div>
<div class="column">2008</div>
</div>
<div class="row">
<div class="column" style="background-color: #C10020">5</div>
<div class="column">Nissan</div>
<div class="column">Sentra</div>
<div class="column">2011</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #CEA262">6</div>
<div class="column">BMW</div>
<div class="column">M3</div>
<div class="column">2009</div>
</div>
<div class="row">
<div class="column" style="background-color: #817066">7</div>
<div class="column">Honda</div>
<div class="column">Civic</div>
<div class="column">2010</div>
</div>
<div class="row row-odd">
<div class="column" style="background-color: #007D34">8</div>
<div class="column">Kia</div>
<div class="column">Soul</div>
<div class="column">2010</div>
</div>
</div>
</aside>
<div>
<canvas width="985" height="223"></canvas>
</div>
</article>
<section>Log</section>
</main>
Well your code is a mess. Here is my attempt to clean it a bit and achieve what you described: https://jsfiddle.net/dckex2g7/
I assumed that top and bottom bars have fixed height which makes this a bit simpler. If they don't, you should use display: flex; flex-direction: column on body element and flex-grow: 1 on .content.
Notice how I haven't used any JS for layout. To make it responsive you should use things like min-width and media queries. You almost never need JS for layout unless in a very few very specific cases which are not covered by flexbox somehow.
There's really a lot to describe about this solution so if you have any specific question ask away.
My HTML:
<table style="width:100%;">
<tbody>
<tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
<td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
<span style="color:#F87E20;">Copy</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </div>
<span style="color:#F87E20;">Delete</span>
</td>
</tr>
</tbody>
</table>
The result:
This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.
The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;
The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.
Here are some images to help explain the situation:
Parent:
And Child:
I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?
Your spans are inline elements. Top and bottom padding is ignored in case of inline elements.
By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support.
See:
table {
width: 100%;
border-bottom: 1px solid #ACACAC;
}
tr {
cursor: pointer;
height: 60px;
}
td {
text-align: right;
vertical-align: middle;
padding: 10px 10px 10px 0px;
background-color: #e0c000;
}
span {
display: inline-block;
color: #F87E20;
background-color: #f0e000;
}
.padded {
padding: 10px 0 10px;
}
div {
display: inline;
color: #ACACAC;
}
<table>
<tbody>
<tr>
<td>
<span>Copy</span>
<div> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.
I am using Zurb Foundation for page layout. A row on my page needs have some text and then a line that fills the rest of the width, like so:
| Text of Indeterminate Length -------------------------------------- |
I have the desired layout working with <table> and <hr> tags:
<div class="row">
<div class="large-12 columns">
<table style="width:auto;border-collapse:collapse;border:0;padding:0;margin:0;">
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
</div>
</div>
I realize that the use of <table> for layout and <hr> for drawing lines are both generally frowned upon in modern web design. I spent a while trying to get the same layout using <div>, <span>, and <p> and couldn't come up with anything simple and straightforward that didn't require what seemed like an excessive use of Javascript. On top of that, most recommended solutions suggest using things like border_bottom which doesn't give me a nice line in the middle like <hr> does.
So my question is this: is there a straightforward way to do this without <table> or <hr>? Perhaps with some sort of a custom <span> style?
A potential solution could be to give your heading a background style with display:block and width:100% and the text with a white background to hide the line from the containing heading? http://jsfiddle.net/9o74jbLh/
<h3><span>{% block hightide_pagename %}{% endblock hightide_pagename %}
</span></h3>
h3 {
display:block;
position:relative;
width:100%;
}
h3:after {
content:"";
height:1px;
width:100%;
background: #000;
position:absolute;
top:50%;
}
h3 span {
background:#fff;
}
I've seen this design element pop up a few times, and the best way that I've seen it done (which is by no means a perfect way) is to use overflow hidden on a container, float the heading (or make it inline-block), and set the left attribute of your absolutely positioned line element (preferably a pseudo-element so as to keep your markup clean). In effect you get this:
/* stuff to make the demo pretty */
table {
border: 1px solid red;
}
table:before {
content: 'bad way';
color: red;
display: block;
}
.good-ish-way {
border: 1px solid green;
margin-top: 1em;
}
.good-ish-way:before {
content: 'good-ish way';
color: green;
display: block;
}
/* the actually useful stuff. */
.good-ish-way {
overflow: hidden;
}
.good-ish-way h3 {
position: relative;
display:inline-block;
}
.good-ish-way h3:after {
content: '';
width: 100%;
position: absolute;
left: 100%;
height: 1px;
background: #777;
width: 1000%;
top: 0;
bottom: 0;
margin: auto 0 auto 0.3em;
}
<table>
<tr>
<td style="white-space:nowrap;padding:0;">
<h3>Text of Indeterminate Length</h3>
</td>
<td style="width:100%;"><hr/></td>
</tr>
</table>
<div class="good-ish-way">
<h3>Text of Indeterminate Length</h3>
</div>
The only major problem with it is the 1000% part. I've seen other devs use a large pixel value, but the thing is, you'll never know if it's enough. You could use 100vw, but then there are some compatibility issues with older browsers.
Demo for you to play around with it: http://jsfiddle.net/uru17kox/
Edit: Oh! and here's where I first saw this method illustrated in case you want a different spin on it. https://css-tricks.com/line-on-sides-headers/
I have a table I have simplified for this question while preserving the problem.
It is a single row with three cells. The middle one contains an image and the first and last ones fill the remaining space and are textually supposed to be empty.
The height of the first and last cell adapts to that of the central (image) one as it is the highest, which does work -
but they become a tad bigger than they should visually creating a hole beneath the central cell.
HTML:
<article class="content" id="pc">
<table id="contentTable">
<tr>
<td class="pad" id="padL"></td>
<td id="cc">
<a href="#"><img src="http://38.media.tumblr.com/b9dc51057ece7352d07d40f4c59f0c65/tumblr_nb0xmfghdm1tin2h1o1_500.jpg" width="250"/>
</a>
</td>
<td class="pad" id="padR"></td>
</tr>
</table>
</article>
CSS:
#contentTable {
table-layout: fixed;
width: 700px;
}
#cc {
width: 500px;
}
.pad {
background-color: gray;
vertical-align: middle;
}
#padR {
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
}
#padL {
border-top-left-radius: 2em;
border-bottom-left-radius: 2em;
}
Here is a screen shot of the problem with the space highlighted in blue
And a CodePen if it helps.
Why does it occur and how can I remove it?
Since your image is inline, it obeys rules of baseline and has space at the bottom.
I had success by setting:
img {
display:block;
}
To get rid of other table spacing (not showing in your screen-shot), I suggest adding:
#contentTable {
border-collapse:collapse;
...
}
#contentTable tr td{
padding:0;
}
WORKING EXAMPLE
EDIT
Per your comment, here's an example using an embedded YouTube video (iframe). Iframes default to display:inline (replaced element), too.
iframe { display:block; }
WORKING EXAMPLE
Add a class to the cell containing the picture.
<td class="pad" id="cc">
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}