Controlling position of objects
Properties > Layout
Position: The position property in CSS determines the positioning method used for an element. The common values for the position property are:
Size: The size of an element can be controlled using various CSS properties, including:
width and height: These properties determine the width and height of an element, respectively. They can be specified using various units such as pixels, percentages, or viewport units (vw and vh).
max-width and max-height: These properties specify the maximum width and height that an element can have. If the content inside the element exceeds these dimensions, it will overflow.
min-width and min-height: These properties specify the minimum width and height that an element can have. If the content inside the element is smaller than these dimensions, the element will expand to accommodate it.
By using these properties effectively, web developers can precisely control the positioning and size of elements on a webpage, ensuring a visually appealing and functional layout.
Spaces:
Imagine you're writing a story. You use spaces to separate words and sentences so that readers can understand where one word ends and another begins. Similarly, in web documents, spaces are used to separate different parts of instructions, like attributes in tags or properties and values in styles. This helps browsers understand how to display content correctly.
Indents:
Think of indents like organizing your belongings in drawers. You put similar items together and separate them from other categories to make it easier to find things. In web documents, indents are used to organize different parts of the code, like grouping similar elements or rules together. This makes it easier for developers to read and understand the structure of the document.
Imagine you have a piece of paper with a drawing in the center. The space between the drawing and the edge of the paper is like the margin. It creates some breathing room around the content.
Similarly, in web design:
Top Margin: It's the space above an element.
Bottom Margin: It's the space below an element.
Left Margin: It's the space to the left of an element.
Right Margin: It's the space to the right of an element.
You can adjust these margins to control the spacing between elements on a webpage. For example, you might add extra space between paragraphs or between a heading and a paragraph by adjusting their margins. This helps create visually pleasing layouts and improves readability.
Keeps:
Think of it like keeping a paragraph together on the same page. If you don't want a heading to be at the bottom of one page and its corresponding paragraph to be at the top of the next page, you use "keeps" to make sure they stay together.
Breaks:
Imagine you're reading a long sentence in a narrow column. Eventually, the sentence needs to break and continue on the next line. This breaking of content is controlled by "breaks." Similarly, in print or on webpages, you can use breaks to control where lines of text wrap or where pages end and new ones begin.
1. Horizontal Alignment: It's about where things are placed from side to side.
- Left: Things start from the left side.
- Center: Things are in the middle.
- Right: Things end up on the right side.
2. Vertical Alignment: It's about where things are placed from top to bottom.
- Top: Things start from the top.
- Middle: Things are in the middle vertically.
- Bottom: Things end up at the bottom.
3. Justification: It's about how text is aligned within its container.
- Left-justified: Text starts from the left side.
- Center-justified: Text is centered.
- Right-justified: Text ends up on the right side.
- Justified: Text is aligned on both left and right sides, creating even edges on both sides.