HTML:
<div id='inner'>I am sam <em>I am em</em> I am sam</div>
CSS:
#inner {
width: 400px;
height: 400px;
background-color: cyan;
}
em {
margin: 1em;
padding: 1em;
display: inline-block;
vertical-align: top;
}
Result: https://jsfiddle.net/cbukkt3m/1/
Why does it throw the surrounding text to the top and not the em itself?
It is aligned to the top, it's being pushed down by:
margin: 1em;
padding: 1em;
try removing these or changing them to
margin: 0 1em;
padding: 0 1em;
Related
.div-1 {
background-color: #deb887;
margin: 0 auto;
width: 100%;
height: auto;
display: inline-block;
}
.div-2 {
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
<div class="div-1">..... some code here </div>
<div class="div-2">..... some code here</div>
a white space is coming between 2 div, under one another
I found some solution of this problem, but they are not working.
vertical-align: top; ----- not working
line-height: 0px; ------ it effects on the text of div
font-size: 0px; ------- it also effects on text
*{
margin:0;
padding:0;
------------------ not working
Please help, thanks in advance.
.div-1{
display: block;
width: 100%;
background-color: #deb887;
margin: 0 auto;
height: auto;
}
.div-2 {
height: 10px;
vertical-align: top;
background-color: #87ceeb;
margin: 0 auto;
width: 100%;
padding: 32px 0;
text-align: center;
}
Try this way:
<div class="div-1">..... some code here </div><!--
--><div class="div-2">..... some code here</div>
Please note the comment syntax
This very simple html structure
<div id="s1container"><!--
--><div class="s1box"></div><!--
--></div>
which has been commented to try to delete white spaces between the elements, with the following css still produces an unwanted padding in the bottom between both elements
#s1container {
background: gray;
text-align: center;
}
.s1box {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background: #ccc;
padding: 0;
margin: 0;
}
As you can see from this fiddle
https://jsfiddle.net/um1L4c0t/
The only way to ameliorate this problem, is to set the font-size to 0em on the parent and set it back to 1em to the children, which is not a solution considering i'm extensively using em units for the boxes dimensions, the nesting property of ems would make that kind of layout impossible if the parent's font-size is set to 0em
Why is the white space still present even after commenting out the white spaces between those elements?
The comments take out the right white space, vertical-align: top; get rid of the bottom.
* {
padding: 0;
margin: 0;
}
#s1container {
background: gray;
text-align: center;
}
.s1box {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
background: #ccc;
padding: 0;
margin: 0;
vertical-align: top;
}
<div id="s1container"><!--
--><div class="s1box"></div><!--
--></div>
A more modern approach is to use flexbox, where you get the good from both worlds
* {
padding: 0;
margin: 0;
}
#s1container {
background: gray;
text-align: center;
display: flex;
}
.s1box {
width: 200px;
height: 200px;
background: #ccc;
padding: 0;
margin: 0 auto;
}
<div id="s1container">
<div class="s1box"></div>
</div>
Remove display: inline-block; and use margin: 0 auto;
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
I want to make a div grid with a bigger center div in the middle, but the small divs won't wrap properly. What must I change? I'm trying not to use tables because of bandwith and so on.
My HTML:
<div id="main">
<!-- a lot of .icon's here -->
<div class="icon"></div>
<div class="title"></div>
<div class="icon"></div>
<!-- a lot of .icon's here -->
</div>
My CSS:
#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
height: 5em;
width: 5em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0.2em 0;
display: inline-block;
}
Thanks in advance!
Here you go: Fiddle http://jsfiddle.net/fx62r/2/
inline-block leaves white-space between elements. I would use float: left; instead of inline block
Write elements on same line to avoid white-space. Like this:
<div class="icon"></div><div class="title"></div><div class="icon"></div>
And remove Margin:
.icon {
margin: 0 0.2em 0.2em 0; //Remove.
}
.title {
margin: 0 0.2em 0.2em 0; //Remove
}
#main {
display: inline-block;
margin: 5em 0 3em 0;
width: 66.2em;
height: 35.2em;
text-align: left;
overflow: hidden;
}
.icon {
background: #000;
float:left;
height: 5em;
width: 5em;
margin: 4% 0.2em 0.2em 0;
display: inline-block;
}
.title {
background: #777;
height: 10.2em;
width: 21.4em;
margin: 0 0.2em 0 0;
display: inline-block;
float:left;
}
please see this code, i hope it will helpful.
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.