I have setted the body's margin to 0 on CSS. But I couldn't setted the div's margin. So, I want to set another things' margin to 0; but the abc classed div's margin to 5.My code is:
body {
margin: 0;
}
div {
margin: 5;
}
How can I do this?
if I understand correctly, you want all div margins to be 0 except for the div with abc class. to do that just set div element margin to be 0 and div with class abc to be 5px
div {
margin: 0px;
}
div.abc {
margin: 5px;
}
But it's not possible, when you set:
body{ margin: 0px; }
In fact you have set that only for body element and that doesn't set for other child elements like DIV or H and other tags ...
I think your code should work properly
Setting the margin of the body to zero wouldn't affect affect other margin of the parent elements.
If you want to set margins for parent elements, ensure you do so with figures and unit, the unit is very important, and some of these units are px, rem, em and as well as % (percentage).
And you should also note that "margin" works for margin top, bottom, left, and right.
You can read more on unit here:https://www.w3schools.com/cssref/css_units.asp
Margin: https://www.w3schools.com/css/css_margin.asp
Try adding px to the value 5 in your code above. Values in CSS should always have a unit. It could be px, pt, %, em, rem, etc.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Add px to 5 and 0, just like the way you will add m or cm to a measurement.
Related
I have the following html:
<style>
body {
margin: 0;
height: 100vh;
}
div {
margin: 1px;
}
</style>
<body>
<div>feck</div>
</body>
The div's margin causes scroll bars, even tho the div itself is nowhere near the height of the page. Without the div's margin, there is no scroll bar. What's going on? Is this a browser bug?
Collapsing margins. Because the div is the topmost element in the body, the div's margin is collapsed with the body's margin. That is, the body gets the same margin too.
You may think that "collapsing" isn't the right word for this behaviour, and you'd be right, but that's the word they've chosen. Sorry.
There are several solutions:
Sean's solution of simply moving the div a pixel downwards
Your own solution of using calc for the body height
Set a padding on the body, and use box-sizing:border-box for it.
Because a div is a block element. It has positioning in the Dom, therefore takes up space. When you add a margin to the top, you are pushing its space down, therefore increasing the overall amount of space it occupies.
If you want to push the div down, without changing the overall container (body) height, you can give the div a position of relative, and a top of 1px.
div {
position: relative;
top: 1px;
}
Check out this answer it should be clear enough.
The main point is that margins of adjacent elements (in this case your div and body) are collapsing taking the maximum value of the two margins.
Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?
Here is the code
HTML
<header>
this is a header
</header>
<div class="container">
this is a container
</div>
CSS
header {
width: 90%;
height: 100px;
background: blue;
position: fixed;
z-index: 100;
}
.container {
width: 90%;
height: 500px;
background: red;
position: relative;
z-index: -2;
}
Here is a link to the codepen http://codepen.io/colbydodson/pen/wcgua
Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.
The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),
header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset.
To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit
.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)
Unwanted result:
logically header will be 20px wider than .container because position fixed moves your element out of body flow.
Fix:
control your parent (body) element default margin by setting to 0
body { margin: 0; }
Or a small but heavy CSS reset like:
/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }
Read also CSS Box Model - Margin collapsing
I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.
If you're willing to not support IE8 and below, you can use
width: 100vw
Can I use Viewport units: vw, vh, vmin, vmax
The accepted answer is fine but in my case, I was seeing a fixed header that was wider than the rest of the page only on a mobile device. It happened to be caused by some element in the footer that had a width in pixels wider (width: 750px in my case) than the viewport of the browser.
If you want to know if some element on your page is causing this problem for you? Just open your browser console and remove some elements further down. At some point, you may notice the header becoming the correct width again. Chances are that the element you just removed or some element in it has a width in pixels wider than the viewport of the browser.
The solution, in that case, is to either set that element to a lesser width or make it flexible.
By default the body tag have margin.
Try this in your stylesheet:
body{
margin: 0;
}
As Salaw mentioned, using body { margin: 0; } will solve the issue, since <body> has default margin/padding (depending on the browser). position: fixed; removes an element completely from the flow of the document and makes it relative only to the viewport, while position: relative; does not.
Given this fact, and given that width: 90% means "make this element take up 90% of parent element's available space", and given that the parent of a fixed element is the viewport while the parent of this relative element is the body with its margin, you have the discrepancy in sizes.
See http://codepen.io/anon/pen/exzpC
Because position:fixed behave as the element is detached from document, and placed in the nearest top/left corner of the document, adding default body's margin. That's why it will take the same amount of space, as your second div, if you reset body margin.
That's the 10^6 $ question!
I've searched and read a lot about this, but is there a state-of-the-art method that would respond to the following problematic :
if height(block content) < height(viewport):
height(block) = height(viewport)
else:
height(block) = height(block content)
The bottom of the block should always touch the bottom of the page. I'm looking for the most simple, clean and cross-browser way to do this.
Thank you!
The most common way is to do this:
html, body { height:100%; }
Then set any elements which are to also fill the vertical space to height:100%.
Note: For this to work the item needs to be block-level and have content, even a &nsbp; would do and don't forget that padding adds to the height of the element so be sure to compensate accordingly if you absolutely have to have padding on that element.
min-height is what you're describing. Just know you'd have to give html, body, and all parent tags a height for percentage heights to work:
html, body, #someBlockId {
margin: 0;
padding: 0;
min-height: 100%;
}
Note: I had to remove the margin and padding, because those are added after the height is calculated. box-sizing can change this behavior, but it isn't quite cross-browser.
Considering that :
The bottom of the block should always touch the bottom of the page
I would go like :
.block {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
Then set the height if height(block content) > height(viewport).
If no height is set, it will take all the space of the offset parent.
If height is set, it will override top:0; bottom:0;.
Then if height is set and you remove top (remove, no set it to 0), it will stick to the bottom of the offset parent.
I have 2 div, one is using position :absolute and another is using position : static (default)
the absolute position by left : 100px.
the static position by margin-left : 100px
Why they aren't the positions at same place?
Posting a link to the fiddle would be nice, but until then you could try setting:
html, body
{
margin: 0;
padding: 0;
}
Since the absolutely positioned div has been taken out of the normal flow of the document, it is most likely that any inconsistencies between the placement of the static div and the absolute div are caused by margin's or padding's set on the elements containing the static div.
Are you sure it isn't the Border width of 2px all the way around (added up) to total 8px?
You need to remove the body margin.
body {
margin:0px;
}
The absolute div is a child of 'HTML'. The static div is a child of 'Body'. Body, by default, has an 8px margin.
Example: http://jsfiddle.net/y5S6W/
Since the elements are displayed in the order they are coded into the page by default, the absolutely positioned div will be in a specific place; however, the 2nd div will be after the first div, which means that its CSS of margin left: 100px; actually moves it over 100px plus the width of the first div from the left side of the page.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
CSS 100% height with padding/margin
(15 answers)
Closed 3 years ago.
I have been searching around but I can't find a solution to apply to my own problem.
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16px and margin: 5px that makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
To try it out: http://jsfiddle.net/wuSDh/
You can use calc, modern browsers support it and IE9+ as well.
div {
margin: 10px;
width: calc(100% - 20px);
height: 10px;
background: teal;
}
<div></div>
Browser support
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
Example: http://jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0;
The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br> tags that you added are redundant. Remove those, and you are in business!
Demo: http://jsfiddle.net/trex005/6earf674/1/
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
Looe the width:100%; then simply use as much padding as you like:
#login_box {
padding:10px;
margin:50px;
}
Demo
http://jsfiddle.net/PFm3h/
Isolated effect:
Demo
http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
Another solution is to position the INPUT’s absolute and add left/right props:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn’t set a fixed width.
This technique is widely supported in all browsers.
Demo: http://jsfiddle.net/wuSDh/3/
You can adjust your textbox width 100% to 95% .Now it's looking good
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/