I try to remove padding between two span elements which is not working, i did padding and margin set to 0px but didn't work
span {
padding: 0px;
margin: 0px;
}
somehow div container occupies some default padding which creates problem, someone can help to solve this issue
http://jsfiddle.net/f30boLhu/
here i want to remove black marked space between two texts
you can play with line-height or add a height to .bonus
.bonus {
font-size: 1.4em;
display: block;
height: 20px;
}
Try to add some style with existing code for your second span whose having promise class, See below CSS code -
Or try this JSFiddle
CSS Code-
.promise {
position: relative;
top: -10px;
}
Try to put span tags together like:
<span>one</span><span>two</span>
Without any separate between them
Related
I have a simple list of divs, with the exception that one div is an inline-block
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
<div>xxxxxxxxxxxxxxxxxxxx</div>
...
div {
background-color: #000;
color: #fff;
line-height: 20px;
font-size: 20px;
}
div:nth-child(5) {
display: inline-block;
color: #bada55;
}
DEMO
all looks just fine (font-size :20px). However, when I change the font-size to 10px things are getting weird
DEMO
Although I can fix it by adding
body { font-size: 0 }
DEMO
I still don't understand why it did work with a line-height and font-size of 20px ? Any suggestions ?
Because the inline one has to be positioned inside the line height of its container.
If you set the container's line-height to 10px (the body in your examples) it will work fine.
I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).
html:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.
This is due to the margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
You can find further information also on w3c site.
Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]
So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.
It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.
If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.
h1 { padding: 0; margin: 0; }
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}
set h1 margin to 0
h1 {
margin: 0;
}
It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px
<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.
You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.
It's a tricky problem I have and I don't find the best solution. Here is the page:
https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/
As you can see, the green div element overflows the user profile. I don't want to use a margin-left to align it because it will change the position of other green elements and I want to keep a common structure between each of them (this means I don't want to add a new class to align this green element). I want to design a clean solution and make this green element automatically align when it is in the first part (next to the user profile) and in the second part (below the user profile) and only with css (I want this solution working with JavaScript deactivation).
here is the main class for this div (others are just margin top and bottom adjustments):
.block-info {
display: block;
margin: 10px 0 0;
padding-bottom: 3px;
border-left: 28px solid $green;
.icon-block, .text-block {
display: block;
}
.icon-block {
float: left;
margin-top: 5px;
margin-left: -23px;
}
.text-block {
padding-left: 18px;
}
+ br {
display: none;
}
}
If someone have an idea.
Set .block-info to display: table and its children to display:table-cell (this might not be needed, but I believe it should be done for correctness) and it should behave more like you expect.