I would know if it was possible to highligth the (logically) invisible margin and padding in a page. Like when we use the inspector dev tools of a browser but permanently.
The purpose is to see in the browser if margins and paddings are set in a logical thought.
The easiest way would be a browser plugin ?
Thank's
Nicolas.
There isn't direct way but you can use background properties to achieve the same. From below code, you can add highlight-props class name to the parent element to which the props should be highlighted.
.parent {
background-color: var(--margin-color);
display: inline-block;
}
.child {
margin: 40px;
padding: 40px;
width: 100px;
height: 100px;
display: inline-block;
border: 30px solid grey;
}
.highlight-props {
--margin-color: orange;
--padding-color: blue;
--border-color: green;
--content-color: yellow;
}
.highlight-props > * {
background-image: linear-gradient(var(--content-color), var(--content-color)),
linear-gradient(var(--padding-color), var(--padding-color));
border-color: var(--border-color);
background-clip: content-box, padding-box;
}
<div class="parent highlight-props">
<div class="child">
</div>
</div>
Related
Here is a simple block of code:
<style type="text/css">
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
}
</style>
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
But, the results are different when viewed in different screen widths.
Here, the child div completely fits the parent div at a certain screen width.
But here, when at a different screen width, a white space of about 1px appears on both the sides of the child div.
How can I get rid of this white space and make sure that the child div completely fits the parent div?
The issue lies with the border you've used and the way browsers handle this. Setting the box-sizing to border-box solves this issue. It's a common one but once you know it you'll be able to better spot it.
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.child {
width: 100%;
height: 100px;
background-color: #999;
margin: 0;
}
<!DOCTYPE html>
<div class="parent">
<div class="child"></div>
</div>
Also, you don't need to define text/css in your tags these days, browsers know what the code is. Also try not to use it inline unless it was just for this question. Similarly, the <center> tag has been depreciated which means it's no longer supported in HTML 5 so you should center things using margin or flex. Margin is the easiest so that's why I've added that here.
Sometimes browsers will treat things differently in quirks mode too, so make sure you have a doctype declaration.
This is because you are using Chrome browser.
I have the same behavior with the very simple code:
<div class="container">
<div class="item-a">item A</div>
</div>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
width: 500px;
height: 500px;
border: 5px solid black;
background-color: cornflowerblue;
}
.item-a {
width: 300px;
height: 140px;
background-color: orange;
border: 3px solid crimson;
}
At 100% zoom it has a gap. When I zoom, the gap disappears, but when I zoom again - the gap between container and item-a may or may not show up again (you can notice cornflower background of 1px between a parent and child borders).
This is how Google Chrome handles things in both Linux and Windows 11 at the moment.
Then I gave a shot to view the same code via Firefox and there is no gap regardless of zooming.
Contrary to the many answers suggesting to set box-sizing: border-box, I used content-box instead and it fixed my issue: box-sizing: content-box
Try set child with the same width: 75vw;
.parent {
position: relative;
width: 75vw;
height: 300px;
border: 5px solid #000;
}
.child {
width: 75vw;
height: 100px;
background-color: #999;
}
<center>
<div class="parent">
<div class="child"></div>
</div>
</center>
Whenever I add margin to any element I get overflow, I tried adding box-sizing, position:relative. but nothing works
searched on google but nothing seems to help me
can anyone know why is this happening?
Sample Image
The margin is outside the element. One way to deal with it is to use calc on width as in the following snippet.
And note that margin is diferent from padding: paddingis inside the border (so it is included in the area covered by the background color), margin is outside:
.x {
box-sizing: border-box;
margin: 30px;
width: calc(100% - 60px);
background: yellow;
border: 5px solid red;
}
<div class="x">margin....</div>
With padding instead of margin, this would be:
.x {
box-sizing: border-box;
padding: 30px;
width: 100%;
background: yellow;
border: 5px solid red;
}
<div class="x">Padding....</div>
You can't add margin to a div that is a sibling of your container or else it'll create an overflow. Use padding instead. See how the text in the margin example shifts the text.
.parent {
width: 100px;
height: 100px;
background: red;
}
.padding-example {
padding: 10px;
}
.margin-example {
margin: 10px;
}
<div class="parent">
<div class="padding-example">Correct</div>
</div>
<hr>
<div class="parent">
<div class="margin-example">Wrong</div>
</div>
I want to style only the content area of a div having a padding to visualize its content boundary like the inner box in the dev-tools is colored by the web browser. I've tried many things but either the css recommendations are not yet implemented like or maybe I use it in the wrong way.
<div class="around">
<div class="div-with-padding outline-content">
stuff ...
</div>
</div>
.around { margin: 50px auto; width: 400px; padding: 0px; }
.div-with-padding { min-height: 200px; padding: 15px; }
I've added an outline to the div just for comparison. The position: relative below is needed because its child's max-height/width only fits to the matched div if its position is relative.
.outline-content {
outline: 1px solid red;
position: relative; /* in the original post I've used bootstrap instead */
}
I've found no way to do this within the original div so I've added a pseudo-element.
First try:
.outline-content::before {
content: '';
position: absolute;
width: max-content; height: max-content;
outline: 1px dotted blue;
}
I don't really understand how max-content works. I've tried also others mdn. Maybe it doesn't work because I've set position: absolute; to don't change the page itself.
Second try:
.outline-content::before {
content: '';
position: absolute;
width: calc(100% - 30px); height: calc(100% - 30px);
outline: 1px dotted blue;
}
The question is how to get parent's padding = 30px if it isn't always the same. I've tried much more but without success.
I know with jQuery this problem becomes easy. If anybody knows an answer using only css … I really like to know it. Please also correct mistakes in my code snippets (width: max-content; and the like).
Thanks!
(this post includes some adaptions to the comments)
The magic css-property is called "background-clip".
HTML
<div class="outer">
outer-content
<div class="inner">
inner-content
</div>
</div>
CSS
.outer {
display:inline-block;
background-color: red;
border: 1px solid black;
padding: 10px;
}
.inner {
width: 100px;
height: 100px;
padding: 10px;
background-clip: content-box;
-moz-background-clip: content-box;
background-color: green;
border: 1px solid black;
}
Example: http://jsfiddle.net/u2vyqdc6/2/
As you can see:
One surrounding div with some content and some padding so you can see better what's going on.
Inside is another div with content, padding and "background-clip: content-box".
"background-clip" works just like "(-moz-)border-box". It tells the browser how to handle the background-specific box-model.
And the best thing?
Browser-support is almost universal at 95%:
http://caniuse.com/#feat=background-img-opts
Here is a screen for the question above http://prntscr.com/66o7rf .
When I use border-radius in parent div and overlap another background with same value of border-radius, there appears a small space ( in screen, white space appears ).
I tried using background in :before and :after , but i don't think is a good way to do it.
Can anybody help with this?
body{
background: grey;
}
div {
width: 200px;
height: 200px;
background: #000;
border-radius: 10px;
padding-top: 160px;
overflow: hidden;
}
.footer {
width: 200px;
height: 40px;
background: #f00;
}
<div>
<div class="footer"></div>
</div>
When you use border-radius in parent div, dont set overflow: hidden to it. And for overlapping div or child div of it add border-radius to it but 2px less than parent div.
Example:
div{
background: #fff;
border-radius: 10px;
}
.child{
background: blue;
border-radius: 8px;
}
Take this HTML:
<div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
<div class="block">Hello</div>
</div>
With the companion CSS:
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px;
background: red;
}
The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).
Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.
This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left to 1 pixel etc.
There are multiple ways to this
One of them is
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 1px 1px 1px 0;
background: red;
}
div.block:last-child {
margin: 1px 0 1px 0;
}
Another is
div.block+div.block { margin-left: 1px; }
You can check the demo of both way here
How about using the CSS selector :first-child and :last-child to alter the first and last <div>?
div.block
{
float: left;
width: 100px;
height: 100px;
margin: 2px 1px 2px 0;
background: red;
}
div.block:first-child {
margin-left: 2px;
}
div.block:last-child {
margin-right: 2px;
}
If you can alter the markup itself, then I guess we can have a cross browser compatible solution:
<div class="block"> <div class="block_2"></div> </div>
and then apply the css like:
div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}
Assign a class for last block called 'last'.
The set margin-right of every block to 1px.
Set margin-right of block that has last class to 0.
.block.last { margin-right: 0px; }
Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.