HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can)
As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Setting the width
of a block-level element will prevent it from stretching
out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its container. The
element will take up the specified width, and the remaining space will be split
equally between the two margins:
This <div> element has a width of 500px, and margin set to auto.
<div>
above occurs when the browser window is
smaller than the width of
the element. The browser then adds a horizontal scrollbar to the page.
Using max-width
instead, in this situation, will improve the
browser's handling of small windows. This is important when making a site usable
on small devices:
This <div> element has a max-width of 500px, and margin set to auto.
Here is an example of the two divs above:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}