This question already has answers here:
How do I uncollapse a margin? [duplicate]
(5 answers)
Closed 4 years ago.
How can I disable margin collapse and get 200px margin without changing the HTML?
code:
<style>
div{
font-size: 100px;
border: 10px solid black;
padding: 20px;
margin: 100px;
</style>
<body>
<div>AAAA</div>
<div>AAAA</div>
</body>
Thanks, :D.
Try adding a padding of 0.1px to the body tag, or any parent tag that will include these 2 divs.
This old trick used to disable collision for most cases.
You may want to see an explanation and other solutions here:
How to disable margin-collapsing?
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Div not 100% width of browser
(4 answers)
Closed 2 years ago.
I want a div, which acts as a separator. It should have a hundred percent width. However, it doesn't align with the border of the browser.
What is wrong? I tested it with the latest firefox and chrome:
<div style="background-color: black;height:4px;display:block;"></div>
<div><p>Content</p></div>
<div style="height:20px;"></div>
I also tested the CSS-style "border" instead of background-color, but it has the same result.
Just remove the margin from the body:
body {
margin: 0;
}
<div style="background-color: black; height: 4px; display: block;"></div>
<div><p>Content</p></div>
<div style="height: 20px;"></div>
Inline version:
<body style="margin: 0;">
give 100% width to body. it will fix the problem.
This question already has answers here:
Understanding margin-collpasing
(1 answer)
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
I read on MDN that adding overflow: hidden or float on a containing element creates a block formatting context. This should stop the margin collapsing of inner child elements. But, it doesn't seem to do that. Here's a working example:
.container {
overflow: hidden;
border: 1px dotted red;
}
h1, h2 {
margin: 10px;
border: 1px dotted blue;
}
<div class="container">
<h1>First</h1>
<h2> Second </h2>
</div>
However, adding float on individual h elements make their margin collapsing disabled.
Why doesn't creating new Block formatting context on parent element disable margin collapsing?
This question already has answers here:
What is the best way to clear the CSS style "float"?
(14 answers)
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
I have this in my css file and html file.
.prodhome-boxshadow{
padding: 10px;
box-shadow: 5px 10px 18px #888888;
}
.prodhome-category {
width:22%;
float:left;
margin:0 1.65% 3.55%;
}
.prodhome-category img {
max-width:60%;
height:auto;
margin:0 5%;
align-content: center;
}
<div class="prodhome-boxshadow">
<div class="prodhome-category">
<h1>Product-title</h1>
<img src="" />
</div>
</div>
<div class="clearrow"></div>
what I get is the box shadow does not encompass the product title and image. Instead I get the box shadow display above where the products are and ends before the Producttiles are displayed. How can I accomplish this?
This question already has answers here:
wordwrap a very long string
(11 answers)
Closed 7 years ago.
The max width is being ignored when are are no spaces in between words. Is there any way to override, or fix this?
div {
border: 1px solid black;
max-width: 100px;
}
<div>
testtesttesttesttesttesttesttesttest
</div>
Try the word-wrap css property.
word-wrap: break-word
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 8 years ago.
I have some divs lined up horizontally and the content in the div is pushing it out of line with the others. How can I make them line up regardless the amount of content? I intend to add overflow:hidden so large content will not destroy the layout. No javascript involved. Needs to work in IE9+ and chrome.
MARKUP
<div class="panels">1</div>
<div class="panels">2</div>
<div class="panels"><img src='\images\img.png' height='64px'></div>
<div class="panels">4</div>
CSS
.panels {
/*line-height:200px; */
display: inline-block;
width:22%;
height: 200px;
margin:5px;
border: 1px solid blue;
}
I have a fiddle
Another saturday stolen by work. :(
Use vertical-align: top on .panels.
http://jsfiddle.net/y9pEV/2/