* {
margin: 0;
padding: 0;
}
.box {
width: 230px;
border: 1px solid red;
}
input {
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span {
padding: 0 2px;
cursor: pointer;
line-height: 20px;
font-size: 14px;
display: inline-block;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
I want to know why there is 1px space between bottom of span and bottom of outdiv? can someone help me out?
You need to set vertical-align:top for the display: inline-block span tag
*{
margin: 0;
padding: 0;
}
.box{
width: 230px;
border:1px solid red;
}
input{
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span{
padding: 0 2px;
cursor: pointer;
line-height:20px;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
By default, a span element is an inline level element, which respects the whitespace in the markup. Thats the reason a small space between the input and span. Thanks..
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
Trying to put this on an imaged background. I've got it to semi-work but doesn't attach for some reason. Is it wrong to make it as 2 elements trying to connect them? Is there a way to make it one element, or a better way to do it?
Here's what it is now:
http://codepen.io/anon/pen/MJJJog
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.header__ribbon__point {
margin: 0;
width: 0;
height: 0;
border-top: 35px solid #ad0304;
;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;
;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText {
font-size: 16px;
}
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
<div class="header__ribbon__point"></div>
</div>
There's a space between the 2 header DIV's. You can set font-size:0 in your wrapper class.
It's better to use psuedo elements, before and after IMO. Here's a fiddle for you.
https://css-tricks.com/pseudo-element-roundup/
https://jsfiddle.net/vvupo6ha/1/
<div class="wrapper">
<div class="header__ribbon">
<p>Complimentary Event -</p>
<p class="header__ribbon--secondaryText">
mark your calenders for <span class="text__B">march 1<sup>st</sup>!</span>
</p>
</div>
</div>
.wrapper {
text-align: center;
}
p {
font-family: arial;
font-weight: normal;
margin: 0;
padding: 0;
text-align: left;
}
.header__ribbon {
padding: 10px 20px;
background-color: #ad0304;
color: #fff;
width: 70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.header__ribbon:before,
.header__ribbon:after {
position: absolute;
content: '';
top:0;
border-top: 35px solid #ad0304;
border-bottom: 35px solid #ad0304;
}
.header__ribbon:after {
right: -35px;
border-right: 35px solid transparent;
border-left: 10px solid #ad0304;
}
.header__ribbon:before {
left:-35px;
top:0;
border-right: 10px solid #ad0304;
border-left: 35px solid transparent;
}
You've styled .header__ribbon and .header__ribbon__point as inline-blocks, so inline rules apply: you have to remove all spaces between them.
I would use flexbox on the .wrapper
.wrapper{
text-align:center;
display: flex;
justify-content: center
}
p{
font-family:arial;
font-weight:normal;
margin:0;
padding:0;
text-align:left;
}
.header__ribbon{
padding: 10px 20px;
background-color: #ad0304;
color:#fff;
width:70%;
max-width: 350px;
text-transform: uppercase;
font-size: 24px;
display:inline-block;
vertical-align: middle;
}
.header__ribbon__point{
margin:0;
width: 0;
height:0;
border-top:35px solid #ad0304;;
border-right: 35px solid transparent;
border-bottom: 35px solid #ad0304;;
display: inline-block;
vertical-align: middle;
border-left: 10px solid #ad0304;
}
.header__ribbon--secondaryText{
font-size: 16px;
}
http://codepen.io/anon/pen/xgggjq
How to make this effect (cross-browsed) without using float: left?
I need to center this form so float attribute is wrong for me. Anybody can help?
I've made code as you can see below.
My code:
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
Because you want it cross-browser and without using float:left, you can use inline-block with vertical-align:top
And to center, you need to apply margin:0 auto to footer with some width instead
I made a few tweaks to your code.
*,
*::before,
*::after {
box-sizing: border-box
}
body {
margin: 0;
/* demo */
background: lightgreen
}
footer {
/*fix inlin block gap */
font-size: 0;
margin: 0 auto;
width: 265px; /* 230px + 35px */
}
footer input {
line-height: 18px;
height: 35px;
display: inline-block;
vertical-align: top;
}
footer input[type=text] {
border: solid #efefef;
border-width: 1px 0 1px 1px;
width: 230px;
padding: 0 10px;
font-size: 16px;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('//dummyimage.com/35x35') no-repeat center center;
color: #fff;
width: 35px;
font-size: 18px;
cursor: pointer
}
<footer>
<input type="text">
<input type="submit">
</footer>
Your code without float:left actually works fine. Maybe you experience the line break on small sized screens. If it is the case, just add a piece of CSS for your footer like this example.
footer {
white-space: nowrap;
text-align: center;
}
footer input[type=text] {
border: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 35px;
display: inline-block;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b url('../../../gfx/submit.jpg') no-repeat center center;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
margin: 0 auto;
}
<footer>
<input type="text" />
<input type="submit" />
</footer>
Use like this
<style>
body{margin:0;}
footer{
width:100%;
background:#ccc;
height:250px;
}
.form{
width:292px;
margin:0 auto;
}
footer input[type=text] {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #efefef;
border-right: 0;
width: 230px;
padding: 0 10px;
font-size: 16px;
line-height: 18px;
height: 37px;
display: inline-block;
float: left;
margin: 0 auto;
}
footer input[type=submit] {
border: 1px solid #df242b;
background: #df242b;
color: #fff;
width: 38px;
height: 37px;
font-size: 18px;
line-height: 18px;
cursor: pointer;
display: inline-block;
float: left;
margin: 0 auto;
}
</style>
<footer>
<div class="form">
<input type="text">
<input type="submit" value=">">
</div>
</footer>
I would like to align my icon elements with the form inputs. This is what I have so far:
jsfiddle
<div class="ctr">
<div class="icon-ctr">
<span class="icon"></span>
</div>
<input type="text" />
</div>
and the css:
.ctr {
font-size: 0;
}
.ctr input {
font-size: 14px;
line-height: 14px;
height: 14px;
width: 100px;
padding: 13px;
border: 1px solid #000;
}
.icon-ctr {
display: inline-block;
height: 16px;
padding: 12px;
border: 1px solid #000;
margin-right: -1px;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
background-color: #f00;
}
You'll notice that the elements don't align in a straight line as I had hoped. Firstly what property is causing this? And secondly what is the most appropriate way to align the elements in a straight line?
Inline block elements, by default, align to the baseline of the previous element.
All you need to do is vertically align the input to the top of the icon.
.ctr input
{
vertical-align: top;
}
JSFiddle
Use in .icon-ctr add float: left;
.ctr {
font-size: 0;
}
.ctr input {
font-size: 14px;
line-height: 14px;
height: 14px;
width: 100px;
padding: 13px;
border: 1px solid #000;
}
.icon-ctr {
display: inline-block;
float: left;
height: 16px;
padding: 12px;
border: 1px solid #000;
margin-right: -1px;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
background-color: #f00;
}
<div class="ctr">
<div class="icon-ctr">
<span class="icon"></span>
</div>
<input type="text" />
</div>
I want to style a <button> and <a> element both into the same format. I use the following code:
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
But the <button> element seems to ignore the height and my <a> element does not touch the edge of the black dummy <div> above:
You can test the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/
Try this:-
button, a {
background-color: white;
border: medium none;
box-shadow: 0 0 1px #000 inset;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
vertical-align: top;
}
Or:-
button, a {
background-color: white;
border: medium none;
vertical-align:top;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
border:1px solid #000;
box-sizing:border-box
}
DEMO2
DEMO
Apparently the default box-sizing method for button is border-box while that for inline-block is content-box. So:
35px height means the <a> is actually 37px tall (border adds 2px)
35px height means the <button> tag is 35px tall (35px includes the border)
Set the box-sizing: border-box on both elements.
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
box-sizing: border-box;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
try adding vertical-align: bottom to button, a selector
button, a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
vertical-align: top;
}
#dummy-block
{
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>Okay</button>
<a>Edit</a>
a
{
padding:1px 15px;
}
button,a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
button
{
padding: 0 15px;
}
HTML
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
...
CSS
.Fieldset
{
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend
{
border: medium none;
left: 40%;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
In Firefox legend gets aligned at center. But in Chrome it does not.
Add this CSS, remove margin :auto & left:40% then add margin-left:40%.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin-left: 40%;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
Simply delete left:40% from .Legend and text-align will do the rest.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
margin:auto; is doing all the work
text-align:center; does not do anything
left:40%; interferes with margin:auto;
Run this example:
fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
legend {
margin: auto;
padding: 0 10px;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset>
<legend>Long title long title long title long title </legend>
</fieldset>
This post is useful. However, I managed to align the legend to the center just with text-align:center as shown below.
legend {
text-align:center;
}
StackBlitz example for the same is here: https://stackblitz.com/edit/angular-nzmpzi