I have a simple grid with 2 columns with border and two columns Fiddle
The problem is I want to adjust the border to the content and the content has left padding, so I want to remove that free space.
I tried to use box-sizing: border-box; but it causes no effect
HTML:
<div class="totalContainer totalContainer__space" *ngIf="selectedMenuItem === menu[3]">
<div class="totalContainer__text">
<label><strong>Annual</strong> Test Test </label>
</div>
<div class="totalContainer__text totalContainer__result">
<label><strong>80</strong></label>
</div>
</div>
SCSS:
.totalContainer {
display: grid;
grid-template-columns: 2fr 1fr;
margin-top: 30px;
border: 1px solid rgba(72, 82, 93, 0.8);
border-radius: 12px;
box-sizing: border-box;
&__row {
background-color: #E5E5E5;
}
&__space {
padding: 10px 0 10px 140px;
}
&__text {
font-size: 13px;
}
&__result {
text-align: right;
}
}
Using margin-left instead of padding:
&__space {
padding: 10px 0 10px 10px;
margin-left: 140px;
}
I think you are missing the big picture here.
Making up a block box in CSS we have the:
Content box: The area where your content is displayed, which can be
sized using properties like width and height. Padding box: The padding
sits around the content as white space; its size can be controlled
using padding and related properties.
Border box: The border box wraps
the content and any padding. Its size and style can be controlled
using border and related properties.
Margin box: The margin is the
outermost layer, wrapping the content, padding, and border as
whitespace between this box and other elements. Its size can be
controlled using margin and related properties.
So in short the border includes the padding (it wraps the content as well as the padding), while the margin lays outside of it (pushing the content with border and padding included). I would recomand to check the box model docs.
Related
I though I knew how inline elements worked. A nice answer explaining it can be found here: CSS display: inline vs inline-block.
What it says about inline elements:
respect left & right margins and padding, but not top & bottom
Inline elements only support right and left padding and ignores any padding given for top and bottom. But doing some tests I just found a really odd behaviour. When given a padding to an inline element, it applies it to the left and right of the element but also to the bottom but not to the top.
Is there any explanation for this behaviour?
<html>
<head>
<style>
* {
box-sizing: border-box;
padding:0;
margin:0;
}
.parent{
display:inline;
background-color: red;
padding: 10rem;
color:white;
}
</style>
</head>
<body>
<div class="parent">Whatever</div>
</body>
</html>
Use the browser tools to inspect the element and you'll see that there is also a padding-top of 10em, which is not visible in your snippet.
The reason: Although there is a padding for inline elements, it does not affect the distance above and below it - the line (i.e. baseline for the text) is at the same vertical position where it would be (or better: is) without the padding. The padding here just creates an overflowing area which you only see if there is a background defined.
See my snippet, where I added a wrapper with a 12em padding-top and some text before and after the inline div, and also before and after the wrapper div which demonstrates what happens.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.wrap1 {
padding-top: 12em;
background: green;
/* display: block; is the default here */
}
.parent {
display: inline;
background-color: red;
padding: 10rem;
color: white;
}
.y {
background: rgba(255, 255, 0, 0.4);
border-radius: 50%;
padding: 0.6em 0.15em 0.6em 0.1em;
}
<body>
<div>This is in a separate div which preceds the inline div and its wrapper.</div>
<div class="wrap1">
this is on the same the line
<div class="parent">Whatever</div> yes it is
</div>
<div>And this is in a separate div following the inline div and its wrapper.</div>
<p>And here is another line with one (inline) <span class="y">word</span> that has a padding in a way that <em>might</em> be considered useful.</p>
</body>
I have the following part of my html
<div class="header">
<div class="header-bar">
<div class="pull-left">
<div class="title">Ci models database</div>
</div>
</div>
<div class="clear-both"></div>
<ol class=breadcrumb>
<li class="active">All models</li>
</ol>
</div>
the css(breadcrumb and active classes are bootstrap)
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
But between header-bar and breadcrumb html added a white space(see bootply). How can I remove this white space, since no padding and margin can be found between to divs.
The problem is that the calculated height of the internal .title div is greater than the calculated height of the container .header-bar. Properties like height, min-height, border, padding can directly effect heights, whereas properties like display, box-sizing and position can all indirectly effect height.
The result is the internal .title div pushes down the next div in the flow by 10px.
CSS has no rules that say a div must contain it's children in height and stop them from effecting other divs, even when height is directly defined. We need to tell it exactly how it should behave when things are rendered.
There are several ways to fix this:
http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden; on the parent. Overflow is a css property which is used how to control what happens when child elements are larger than their parents. It's worth noting that depending on other properties overflow won't necessarily render itself in a way that disrupts layout.
http://www.bootply.com/ssq3EAzeyk - set explicit heights to take strict control over the dimensions of the elements. This might be the best option for a header bar.
http://www.bootply.com/yeodYRLLJk - set a greater min-height on the parent, one which will definitely contain the child. This is useful if your padding is for alignment purposes - setting min-height: 40px; in the example does this.
http://www.bootply.com/GznfJxUWUF - remove the padding that is making the element calculate as taller (as mentioned in another answer).
Apostolos, the white space is coming from the .titleclass.
The bottom padding of 10px.
Zero this and the white space will go.
.title {
padding: 5px 5px 0px 5px;
you will have to add a float: left to both parent containers (.header-bar and breadcrumb) otherwise the clear won't affect anything. furthermore you will have to give both containers width: 100%
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
width: 100%;
float: left;
}
.breadcrumb {
width: 100%;
float: left;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
I have such HTML:
<div class="select-wrapper">
<select name="type">
<option value="test">test</option>
</select>
</div>
And css:
#search-box .select-wrapper {
display: inline-block;
padding: 6px;
background: #eaeced;
}
#search-box select {
font-size: 11px;
margin: 0px;
padding: 0px;
padding-left: 8px;
border: 1px solid #a6a6a6;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-border-radius:2px;
}
However somehow wrappers top padding is bigger then bottom one:
When I highlight wrapper in inspector, it looks like that:
As you can see, there is some space between selects top border and top of the inner content of a wrapping div.
Why is it there ? How can I force both top and bottom spacing to be equal ? I need that wrapping element for additional outer border.
CSS outline and box-shadow isn't enough, because I need to specify corner rounding. Shadows rounding is relative to border rounding and its too big for me, so I need to make this outer border with DIV-wrapper with my own, small border-radius.
The height of the select is smaller than the inner height of .select-wrapper.
Add display: block and height: 100% to the select so it will take the full height and width of it's parent.
DEMO.
You could change the font size to 100%, although it changes the font size from what you originally coded, it does sort the padding outside of the select box.
#search-box select { font-size:100%; }
http://jsfiddle.net/r2wpxvw2/
http://jsfiddle.net/sj1aL1o8/
.select-wrapper {
display: inline-block;
padding: 6px;
background: #eaeced;
line-height: 16px;
}
In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". But In the following, the child element is wider than the parent.
//html
<div class="wrapper">
<div class="content-main">
<div class="main">This is main</div>
</div>
</div>
// style
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
.main {
width: 500px;
border: 1px solid #f00;
}
So I have two quesions:
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
Why in my example, the element will stick out the parent.
in the edit version, the seven properties add up to the width of the element' containing block seems work well. Why the equation not apply to my example?
EDIT VERSION
p.wide width is 438px, the author calculate as following
10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width)
// HTML
<div>
<p class="wide">A paragraph</p>
<p>Another paragraph</p>
</div>
// CSS
div {width: 400px; border: 3px solid black;}
p.wide {
margin-left: 10px; width: auto; margin-right: -50px;
border: 1px solid #f00;
}
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
He is teaching you CSS Box Model, here, you are using div elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span or i or b tags, which are inline elements.
So when you use padding or border they are added outside of the element and not inside. So for example you have an element of say 100x100 in dimension, and you add a padding like
element {
width: 100px;
height: 100px;
padding: 10px;
}
So in the above case, your element will be 120x120 in total, because it will add up 10px of padding on all four size of your element.
Explaining padding syntax
You have two different padding syntax, which are as follows...
padding: 30px 0; in .wrapper and padding: 0 20px; in .content-main so these aren't the same.
Both the above syntax are nothing but short hand syntax of padding ... The complete version looks like...
padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */
So in the above example, you have to go clock wise, so 5px is nothing but padding-top: 5px;, then comes 10px which is right, next is bottom and the last 20px is padding-left.
So what when it's just two parameters defined, that means...
padding: 0 20px;
--^---^---
top bottom/left right
So, top and bottom are set to 0 here and right and left to 20px respectively...
Explaining the CSS
Note: None of the element has the height set by you, so the screens
you see ahead which I've attached are computed. So ignore height in them
completely.
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
Here, your element is 502px wide, so why? As I said that border will add on all four sides of the element, and hence it will add 1px on all four sides but your padding is applied to top and bottom only. It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes.
Coming to the second snippet which has the following syntax
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
Here, it is now adding 2px border to your element but, the padding is now applied to left and right and nothing for top and bottom so now the computation will be
Coming to the last snippet which is
.main {
width: 500px;
border: 1px solid #f00;
}
Here, just border is applied, but why it goes out? In technical words, why it overflows? Because you have width defined. So since you have padding set for the parent element, which is padding: 0 20px;, so it will nudge the child element by 20px from the left side. I'll attach a screen of Firebug to show you why it is nudged....
Why in my example, the element will stick out the parent.
Because you are defining width of 500px to your .main div
Demo (What happens when you take out the width)
The default box model is known as content-box
This can be altered by defining a new CSS3 introduced property called box-sizing set to border-box which will alter your box-model in such a way that it will count the padding and border inside the element instead of outside
I have this:
<div class="wrapper">
<input type="text"/>
</div>
div{
border: 1px solid red;
width: 300px;
}
input{
width: 100%;
padding: 10px;
}
I need the input to be 100% of the parent div, but also I need this input to have 10px padding. Results can be seen here: http://jsfiddle.net/pdJYF/
How can I achieve this?
Add box-sizing to your input field:
input{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 10px;
}
Example Fiddle
Browser Compatibility
The underlying "problem" is the box model of HTML/CSS. As you can see in the illustration of the respective MDN article each element's box has 4 different areas: margin box, border box, padding box and content box.
When you assign measures (width or height) to the element, this is applied to one of these areas. If the area is, e.g., the content box, then for the total size of the element margin, border and padding is added. So you wont set the total dimensions of the box, but one of its contained boxes.
The CSS property box-sizing tells the browser, which box to use, when calculating the element's dimensions. The default value is content-box. So in the above example values for margin, border and padding get added and hence the element is too big. By setting the box model to border-box, only the margin gets added to the dimensions (which is zero here) and the elements fits.
Why you don't put the padding in percentage too:
input{
width: 94%;
padding: 0 3%;
border:0;
}
You must decrease 2x padding from left and right, and decrease 2x for any pixel you want use like this and insert your input's width.
For example: 20px (paddings left & right) + 2px (borders left & Right )= 22px
300px - 22px = 278px
div { border: 1px solid red; width:300px; }
input { width: 278px;padding: 10px; }