CSS layout involves a range of techniques and properties that enable web designers to control the placement and organization of elements on a web page. These techniques include setting the width and height of elements, controlling overflow and visibility, applying margins and paddings, using the CSS Box Model to organize elements, and controlling the position and float of elements. By using these layout properties, web designers can create a visually appealing and organized layout for their web pages that is easy for users to navigate and interact with.
Topics covered:
Width and Height
Overflow
Display
Visibility
Margins and Paddings
CSS Box Model
Position
Float
Video (in Bulgarian)
Presentation Content
Width
width – defines numerical value for the width of element, e.g. 200px
width applies only for block elements
Their with is 100% by default
The width of inline elements is always the width of their content, by concept
min-width - defines the minimal width
min-width overrides width if ( width<min-width )
max-width - defines the maximal width
max-width overrides width if ( width>max-width )
Height
height - defines numerical value for the height of element, e.g. 100px
height applies only on block elements
The height of inline elements is always the height of their content
min-height - defines the minimal height
min-height overrides height
max-height - defines the maximal height
_max-height _ overrides height
Width and Height Values
The values of the width and height properties are numerical:
Pixels (px)
Centimeters (cm)
Or percentages
A percent of the available width
Overflow
overflow defines the behavior of element when content needs more space than the available
overflow values:
visible (default) – content spills out of the element
auto – show scrollbars if needed
scroll – always show scrollbars
hidden – any content that cannot fit is clipped
Display
display controls the display of the element and the way it is rendered and if breaks should be placed before and after the element
display values:
inline : no breaks are placed before or after (<span> is an inline element)
height and width depend on the content
block : breaks are placed before AND after the element ( <div> is a block element)
height and width may not depend on the size of the content
Display Values
display values:
none : element is hidden and its dimensions are not used to calculate the surrounding elements rendering
differs from visibility: hidden!
inline-block : no breaks are placed before and after (like inline )
height and width can be applied (like block )
table , table-row , table-cell : the elements are arranged in a table-like layout
Visibility
visibility
Determines whether the element is visible
hidden : element is not rendered, but still occupies place on the page
similar to opacity:0
visible : element is rendered normally
collapse : collapse removes a row or column, but it does not affect the table layout
only for table elements
The space taken up by the row or column will be available for other content
Margins and Paddings
margin and padding define the spacing around the element
Numerical value, e.g. 10px or -5px
Can be defined for each of the four sides separately – margin-top , padding-left , …
margin is the spacing outside of the border
padding is the spacing between the border and the content
Collapsing margins
When the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored
Margin and Padding: Short Rules
margin: 5px;
Sets all four sides to have margin of 5 px;
margin: 10px 20px;
top and bottom to 10px, left and right to 20px;
margin: 5px 3px 8px;
top 5px, left/right 3px, bottom 8px
margin: 1px 3px 5px 7px;
top, right, bottom, left (clockwise from top)
Same for padding
CSS3 box-sizing
Determine whether you want an element to render it’s borders and padding within its specified width, or outside of it.
Possible values:
box-sizing: content-box (default) => box width: 288px + 10px padding + 1px border on each side = 300px
box-sizing: border-box => box width: 300px, including padding and borders
CSS3 box-sizing (Example)
Example: Box with total width of 300px (including paddings and borders)