This question already has answers here:
why do link background overlap parent's sibling
(4 answers)
Closed 8 years ago.
I have a problem with padding and container.
.box {
border: 1px solid black;
}
a {
background-color: green;
padding: 5px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box">
<span class="link">
<span>Hello!</span>
</span>
</div>
When a content has a padding the container ignores the padding's height.
In the example is visible that the span "link" is not drawn in the edge of the container.
How can I fix the problem?
JSFiddle
Thanks!
Add
a {
display: block;
}
http://jsfiddle.net/rxjwcdyp/5/
since the a is an inline-element, you have to give it a display:block.
Maybe you watch some tutorials about how HTML-elements work!
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}
<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>
I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
This question already has an answer here:
Left margin of Margin: auto-ed elements = to padding left of 100%-width overflow item
(1 answer)
Closed 7 years ago.
This is my fiddle: http://jsfiddle.net/o7pfjv3w/. I trying to give to the grid class a margin-left:10px and margin-right:10px; but a scrollbar shows up. How do i get rid of it ?
css code:
.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}
html code:
<div>
<div class="main">
<div class="grid"> <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
</div>
</div>
</div>
Just change your overflow:auto; to overflow:hidden;
.main{
width: 100%;
border:1px solid black;
overflow:hidden; // not auto
display:block;
}
Here is the updated jsfiddle
This has both margin and width: 100%.
.grid{width:100%; margin-left:10px;margin-right:10px;}
You need to make sure you calculate it. So, instead, give padding and make the box-sizing to be border-box:
.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}
Fiddle: http://jsfiddle.net/o7pfjv3w/1/
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 8 years ago.
I try to use css inline property to make div node display in one line, below is my code
<html>
<head>
<style type="text/css">
.inline {
display: inline;
border: 1px solid red;
margin:10px;
}
</style>
</head>
<body>
<div>
<div class='inline'><div>I'm here</div></div>
<div class='inline'><div>I'm follow</div></div>
</div>
</body>
</html>
The result is not right, the two div with class 'inline' still display in two line, and the border is display incorrect too.
I don't know what happen, who can help me?
thanks
use inline-block instead of inline. Read more information here about the difference between inline and inline-block.
.inline {
display: inline-block;
border: 1px solid red;
margin:10px;
}
DEMO
You don't need to use display:inline to achieve this:
.inline {
border: 1px solid red;
margin:10px;
float:left;/*Add float left*/
margin :10px;
}
You can use float-left.
Using float:left is best way to place multiple div elements in one
line. Why? Because inline-block does have some problem when is viewed
in IE older versions.
fiddle
This question already has answers here:
Position fixed element with percentage width relative to container
(2 answers)
Closed 8 years ago.
I would like to make one of column in my layout fixed. Unfortunately when I make it fixed it doesn't fit to parent div width. Is there any way to achieve that.
Html:
<div class="row" style="margin-left: 100px;">
<div class="col-sm-9">
</div>
<div class="col-sm-3">Content</div>
</div>
Css:
.col-sm-9 { background: red; color: white; }
.col-sm-3 { background: blue; color: white; position: fixed; right: 0; }
Here is jsfiddle that demonstrate my problem: http://jsfiddle.net/F5VmF/2/.
You should remove your position fixed from your .col-sm-3 div, and insert another div inside it with a position absolute. And whenever you scroll the page, you will change the top position of that div. Here is the example. And here is the code.
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 8 years ago.
Curious why the top and bottom margins of 10px are not applied to the inner div in the snippet below. If I set the inner display property to "inline-block" it applies the top/bottom margins as expected.
jsFiddle example
HTML:
<div class="outer">
<div class="inner">
My content...
</div>
</div>
CSS:
.outer {
background-color: lightgrey;
}
.inner {
background-color: green;
padding: 50px;
width: 600px;
margin:10px;
display: block; /* No top, bottom margins applied. Does apply them with "inline-block". Why? */
}
The .inner top margin is collapsing.
An easy fix is to make the outer display:inline-block You should put padding:10px on the outer and no margin on the inner.