I have a classic "top navigation bar - sidebar - main content" CSS grid layout which is also responsive and on smaller screens the sections are re-arranged vertically. The grid is styled to stretch out to the entire viewport. The main area is vertically scrollable if the content is longer than the viewport, whereas the top and side navigation bars are "pinned" to their positions and can't get smaller than their content in either direction.
To achieve the vertical scrolling in the main area, I've set the max-height property of the grid container to 100vh, and set the overflow-y property of the main element to auto. This max-height property, however, seems to have an adverse side-effect on the grid: the content can vertically overflow the grid container once the viewport's height becomes smaller than the minimum needed space to display the top navigation bar and sidebar (that can't shrink below their content).
This is what it looks like, for example, on a smaller screen, where the grid cells are stacked on top of each other:
The yellow overlay on the picture above is the scrolled-out part, not visible in the browser window. The main area is at the bottom with zero height (plus the border) but this is okay, as the main element is vertically scrollable and the grid row is set to have 1fr height. The black border is for the entire grid container. As the example shows, the sidebar and the main area is outside of the container.
The same thing on a larger screen, where the sidebar is moved to the left, looks like this:
What I would like to have, however, is that the grid cells don't overlap with the grid container but they are fully contained. That is, on a smaller screen with vertically stacked cells, this:
And on larger screens, with the sidebar on the left:
Can this be achieved using some modified version of the grid structure and CSS given below in the code snippet? So basically I would like to have a scrollable main area with top navigation bar and sidebar which can't shrink vertically below their minimum required height, and a grid container that doesn't overlap with its content. I'd like to avoid anything explicitly sized to a specific value (i.e. I would not like to use something like height: 120px.
Note, that this is a follow-up question on my previous one but it's not the same because I now have the requirement of a scrollable main area.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.bordered {
border-style: solid;
border-width: 5px;
}
/* grid layout */
.grid {
display: grid;
/* Default (small screen) layout. */
/* Single column with 3 rows, the last one filling out the remaining space. */
grid-template-rows: min-content min-content 1fr;
max-height: 100vh;
min-height: 100vh;
min-width: min-content;
}
#media (min-width: 640px) {
.grid {
/* Larger screen layout. */
/* 2 columns with 2 rows, the bottom right cell filling out the remaining space. */
grid-template-columns: max-content 1fr;
grid-template-rows: min-content 1fr;
}
nav {
grid-column: span 2 / span 2;
}
}
aside, nav {
white-space: nowrap;
}
main {
overflow-y: auto;
}
<html>
<body>
<div class="grid bordered" style="border-color: black;">
<nav class="bordered" style="border-color: green;">Top nav</nav>
<aside class="bordered" style="border-color: red;">
<ul>
<li>Some example sidebar item #1</li>
<li>Some example sidebar item #2</li>
<li>Some example sidebar item #3</li>
<li>Some example sidebar item #4</li>
<li>Some example sidebar item #5</li>
</ul>
</aside>
<main class="bordered" style="border-color: cyan;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
</div>
</body>
</html>
A colleague of mine suggested to use the overflow-y: auto property on the grid container itself. While its effect is not exactly the same as I was looking for, it's very similar and it does prevent the sidebar content from overflowing the container. The only minor difference is that when the available space becomes smaller than the necessary minimum to display the content of the grid, it's the grid container that gets a vertical scroll bar instead of the viewport.
Below is the modified code snippet that demonstrates it.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.bordered {
border-style: solid;
border-width: 5px;
}
/* grid layout */
.grid {
display: grid;
/* Default (small screen) layout. */
/* Single column with 3 rows, the last one filling out the remaining space. */
grid-template-rows: min-content min-content 1fr;
max-height: 100vh;
min-height: 100vh;
min-width: min-content;
overflow-y: auto; /* <-- the only property added to the original CSS */
}
#media (min-width: 640px) {
.grid {
/* Larger screen layout. */
/* 2 columns with 2 rows, the bottom right cell filling out the remaining space. */
grid-template-columns: max-content 1fr;
grid-template-rows: min-content 1fr;
}
nav {
grid-column: span 2 / span 2;
}
}
aside, nav {
white-space: nowrap;
}
main {
overflow-y: auto;
}
<html>
<body>
<div class="grid bordered" style="border-color: black;">
<nav class="bordered" style="border-color: green;">Top nav</nav>
<aside class="bordered" style="border-color: red;">
<ul>
<li>Some example sidebar item #1</li>
<li>Some example sidebar item #2</li>
<li>Some example sidebar item #3</li>
<li>Some example sidebar item #4</li>
<li>Some example sidebar item #5</li>
</ul>
</aside>
<main class="bordered" style="border-color: cyan;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
</div>
</body>
</html>
Related
I'm trying to get this text to not "fragment" on smaller resolutions. It's for an assignment, and I'm restricted to using XHTML.
The image to the right is floated like this:
#image {
width:420px;
margin-left: 2%;
height:370px;
position:relative;
float:right;
}
with the XHTML:
<div id="image">
<a href="http://en.wikipedia.org">
<img src="picture.png"/>
</a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Obviously this "fragmentation" doesn't appear on larger resolutions.
Is there an elegant way to this in CSS2.1?
Since the wrapping issue is resolution dependent, you can solve this pretty easily with CSS Media Queries. Think of these as a simple "if/else" for css.
So figure out the window width where the wrapping becomes unacceptable and create a max-width rule with that number. This means for width's less than your max size, the rule will apply.
Now at this size, simply remove the float and set the image to display block which will push the text down the page.
#media (max-width: 600px) {
#image {
display:block; // make image push text down
float: none; // remove your float
margin: 10px auto; // center the image in the available space
}
}
Note: With media queries should be at the BOTTOM of your CSS so they override the previous rule AND you only need to change the attributes that are overridden.
Nice solution #BryceHowitson.
I have just been grappling with this problem and came up with a variant on your approach. I put the Media query on the paragraph of text that followed the image.
My solution targets the clear property on the paragraph that follows the floated image. When the screen resolution leaves enough space beside the floated image for satisfactory rendering of the text, the paragraph wraps around the image. When the available width is too low for satisfactory rendering of the text, the paragraph has "clear:both" applied and the paragraph moves down below the floated image.
One 'pro' for this approach is that the CSS rule is applied to the element whose behavior we are trying to control.
However, what #BryceHowitson's solution achieves, and mine doesn't, is the centering of the image when the wrapping of the subsequent text is turned off.
CSS
.p-clear {
#media (min-width: 400px) {
clear: none;
}
#media (max-width: 400px) {
clear: both;
}
}
HTML
<img src="..." width="300px">
<p class="p-clear">text that needs at least 100px width</p>
How can make an element sticky, so it stays at the top of the viewport? I want the element to remain sticky even if it leaves it's container.
I tried this
HTML
<div class="page">
<div class="parent">
<div class="child-sticky">
<p>i want to be sticky, even when I'm outside my parent.</p>
</div>
</div>
</div>
CSS
.child-sticky {
position:sticky;
top:20px;
}
.page {
height: 3000px;
}
Here's a pen to illustrate the problem. Scroll down to see what I mean.
https://codepen.io/pwkip/pen/OxeMao
Sticky works that way, it will remain sticky relative to its parent. You need to use fixed.
Check this codepen
Already 7 months ago, but I found a CSS only solution if the element you want to be sticky is the last one of its parent, its very simple: Just give the parent element position: sticky; and also give it top: -xx;, depending on the height of the elements before the last one.
#parent {
position: -webkit-sticky;
position: sticky;
top: -3em;
}
#some_content {
height: 3em;
}
#sticky {
background-color: red;
}
#space {
height: 200vh;
}
<div id="parent">
<div id="some_content">Some Content</div>
<div id="sticky">Sticky div</div>
</div>
<div id="space"></div>
<p>Scroll here</p>
This is how position: sticky is intended to work. If you need it to also work outside the parent than you have to change the HTML structure.
See also the official definition: https://www.w3.org/TR/css-position-3/#sticky-pos
There is a little trick you can try.
In some cases it will break your layout and in others it won't. In my case, I have a header with some buttons but when I scroll down, I want to have access to some action buttons which are inside that one-line header. The only change is to set the display property of your parent to be inline.
.parent {
display: inline;
}
Based on https://stackoverflow.com/a/46913147/2603230 and https://stackoverflow.com/a/37797978/2603230's code, here's an combined solution that does not require hard-coded height.
$(document).ready(function() {
// Get the current top location of the nav bar.
var stickyNavTop = $('nav').offset().top;
// Set the header's height to its current height in CSS
// If we don't do this, the content will jump suddenly when passing through stickyNavTop.
$('header').height($('header').height());
$(window).scroll(function(){
if ($(window).scrollTop() >= stickyNavTop) {
$('nav').addClass('fixed-header');
} else {
$('nav').removeClass('fixed-header');
}
});
});
body { margin: 0px; padding: 0px; }
nav {
width: 100%;
background-color: red;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div>
<h1 style="padding-bottom: 50px; background-color: blue;">
Hello World!
</h1>
</div>
<nav>
A nav bar here!
</nav>
</header>
<main style="height: 1000px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
Like mentioned, sticky works that way. However there is a CSS hack that you can play around with.
Disclaimer
This is an ugly hack and will probably create a lot of problems with the following content. So I would not recommend it for most usecases. Having that said...
Negative margin hack
There is a hack you could play around with including negative margin. If you extend the height of the container and then give it some negative bottom margin, it could at least "visually leave" the container.
I altered your code and created a JSFiddle for demonstration.
HTML
<div class="page">
<div class="parent">
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
<div class="child-sticky">
<p>i want to be sticky, even when I'm outside my parent.</p>
</div>
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
</div>
<div class="following-content">
</div>
</div>
CSS
.child-sticky {
height: 200px;
background: #333366;
position:sticky;
top:20px;
color:#ffffff;
}
.parent {
height: 1250px;
background: #555599;
margin-bottom: -500px;
}
.following-content {
background: red;
height:500px;
}
.child {
background-color: #8888bb;
}
.page {
height: 3000px;
background: #999999;
width: 500px;
margin: 0 auto;
}
div {
padding: 20px;
}
https://jsfiddle.net/74pkgd9h/
OK, first of all I tried to show the issue with Sassmeister, but it's so f... slow to compile that I just gave up. I use Susy, SCSS and Haml.
So here is the image that I think is relevant. I want to make the black bar at the top (background-color) to touch the black sidebar at the side. In other words - to add background color to gutter.
Here's my code:
HTML:
<div class="page">
<div class="nav">
<div class="brand">
<a class="name" href="/">Tomasz Gałkowski</a>
</div>
<div class="work">
<a class="projects" href="#">projects</a>
<a class="timeline" href="#">timeline</a>
</div>
<div class="blog">
<a class="articles" href="#">articles</a>
<a class="about" href="#">about me</a>
<a class="contact" href="#">contact</a>
</div>
</div>
<div class="content">
<div class="header">
<h1>Tomasz Gałkowski</h1>
<h2>web developer</h2>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="footer">
<small>Tomasz Gałkowski, 2016</small>
<p>gitlab, facebook, twitter</p>
</div>
</div>
</div>
And (relevant) SCSS:
$susy: (
columns: 12,
gutters: 1/2,
debug: (image: show)
);
.page {
#include container;
#include clearfix; // from compass
}
.nav {
#include span (3 of 12);
background: $background-dark;
height: 100vh;
}
.content {
#include span(last 9 of 12);
background: $white;
.header {
background: $background-dark;
}
}
I was trying some stuff with bleed() or gutters() but it just didn't work the way I wanted it to work. I'm just starting to learn Susy and though I crawled through the whole documentation I wasn't really able to grasp this concept. :)
Susy doesn't really consider colors you'd want for gutters, as they are paddings or margins between grid elements.
The gutter between the nav and .content elements is just a margin between elements.
As the picture above illustrates, between the dark-yellow and the pink-ish elements, there is just a margin.
You can achieve having $background-dark as a background in the shape you described if you add the background to the container wrapper, being .page (that's the element you see between your columns) - the green element on the illustration. By then putting white background on the blue elements you want (.main and .footer), you'll pretty much be there.
Depending on what you're after with the space beneath .footer you may need to extend it's height somewhat, since .page will be visible.
If you're really set on not putting a background on .page, you could use the pseudo element &:before of .content to overlay the gutter between your columns. If feels like patch-work and I wouldn't recommend it.
Even though miphe's answer goes more in-depth I decided to add this one as well to be more case-specific. After some research I decided that what I was trying to achieve is an anti-pattern.
What I did to get the result I wanted to get: I set fixed width on the sidebar and used .content as #include container; instead of .page and moved .content to the right by setting padding-left: $sidebar-width where $sidebar-width is the fixed value.
Good Day
I want to align text in the center of a div. Now that is easy with text-align: center on parent div.
But If I want to left align the text inside the div to the left of the centered div, how do I do that?
See my fiddle: http://jsfiddle.net/DvXzB/5/
HTML:
<div id="aboutContent" class="row-fluid">
<div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
<div id="aboutHeaderBody" class="span12">
<p><a title="">asdasd</a> is a free mobile application available for <a href="#"
title="">iOS</a>, Androidand the Blackberry operating
systems.</p>
<p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
<div id="cities"><a title="">asdasdasd</a> currently only displays events and
specials in <strong>asdasd</strong> (our hometown), but the following locations
will be available before you know it:
<ul>
<li><span>asdg</span>
</li>
<li><span>asdwn</span>
</li>
<li><span>Pasdasdroom</span>
</li>
<li><span>Dasdaf</span>
</li>
<li><span>Bergrin</span>
</li>
<li><span>Sersch</span>
</li>
<li><span>Graergwn</span>
</li>
</ul>
</div>
<p>Visit our Facebook page for more
up to date information, and feel free to contact us with
any queries.</p>
<br />
</div>
</div>
CSS:
#aboutContent {
color: #222;
margin-top: 50px;
margin: 0 auto;
text-align: center;
}
#aboutHeaderText span {
font-family:"Kozuka Gothic Pr6N", sans-serif !important;
color: #eeeeee;
font-size: 26px;
font-weight: bold;
}
#aboutHeaderText img {
margin-top: -18px;
margin-left: 8px;
}
#aboutHeaderBody {
position: relative;
padding: 0px;
font-size: 16px;
}
#cities ul {
list-style: none;
margin-top: 10px;
}
#cities ul li {
font-family:'Open Sans', sand-serif;
padding: 3px 0px;
font-size: 20px;
color: #222;
}
I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): http://www.villagebicycle.co.za/
Note: I am using a fluid layout, so fixed paddings etc won't work
Thank you
You need to center align the container with margin:0 auto after setting its width to a specific size like width:400px. Then align each element separately using text-align.
See this demo: http://jsfiddle.net/DvXzB/16/
If you want your container to have 100% width then do not use text-align:center to your parent div. Instead, use width:100% (optional) and again text-align each block as desired.
You've to use a wraper div to envolve all content. I've done a JsFiddle, I think is what you're looking for :)
.wraper {
position: relative;
width: 500px;
margin:0 auto;
}
Afther that you can align a <p> to the left, right, justify, etc. as you can see:
p.left{text-align:left;}
p.justify{text-align:justify;}
And the HTML for testing:
<div class="wraper">
<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
What exactly is the difference between the inline and inline-block values of CSS display?
A visual answer
Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with
display: inline
display: inline-block
display: block
Code: http://jsfiddle.net/Mta2b/
Elements with display:inline-block are like display:inline elements, but they can have a width and a height. That means that you can use an inline-block element as a block while flowing it within text or other elements.
Difference of supported styles as summary:
inline: only margin-left, margin-right, padding-left, padding-right
inline-block: margin, padding, height, width
display: inline; is a display mode to use in a sentence. For instance, if you have a paragraph and want to highlight a single word you do:
<p>
Pellentesque habitant morbi <em>tristique</em> senectus
et netus et malesuada fames ac turpis egestas.
</p>
The <em> element has a display: inline; by default, because this tag is always used in a sentence.
The <p> element has a display: block; by default, because it's neither a sentence nor in a sentence, it's a block of sentences.
An element with display: inline; cannot have a height or a width or a vertical margin. An element with display: block; can have a width, height and margin.
If you want to add a height to the <em> element, you need to set this element to display: inline-block;. Now you can add a height to the element and every other block style (the block part of inline-block), but it is placed in a sentence (the inline part of inline-block).
One thing not mentioned in answers is inline element can break among lines while inline-block can't (and obviously block)! So inline elements can be useful to style sentences of text and blocks inside them, but as they can't be padded you can use line-height instead.
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="display: inline; background: #F00; color: #FFF">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="display: inline-block; background: #F00; color: #FFF">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
All answers above contribute important info on the original question. However, there is a generalization that seems wrong.
It is possible to set width and height to at least one inline element (that I can think of) – the <img> element.
Both accepted answers here and on this duplicate state that this is not possible but this doesn’t seem like a valid general rule.
Example:
img {
width: 200px;
height: 200px;
border: 1px solid red;
}
<img src="#" />
The img has display: inline, but its width and height were successfully set.
splattne's answer probably covered most of everything so I won't repeat the same thing, but: inline and inline-block behave differently with the direction CSS property.
Within the next snippet you see one two (in order) is rendered, like it does in LTR layouts. I suspect the browser here auto-detected the English part as LTR text and rendered it from left to right.
body {
text-align: right;
direction: rtl;
}
h2 {
display: block; /* just being explicit */
}
span {
display: inline;
}
<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>
However, if I go ahead and set display to inline-block, the browser appears to respect the direction property and render the elements from right to left in order, so that two one is rendered.
body {
text-align: right;
direction: rtl;
}
h2 {
display: block; /* just being explicit */
}
span {
display: inline-block;
}
<h2>
هذا عنوان طويل
<span>one</span>
<span>two</span>
</h2>
I don't know if there are any other quirks to this, I only found about this empirically on Chrome.
inline elements
Have respect for their left & right margin and padding. not for top/bottom.
Cannot set width or height.
Allow other elements to sit to their left and right.
Inline-Block elements:
Respect all sides for margin and padding.
Can set width and height.
Allow other elements to sit to their left & right.
Block elements:
Respect all sides for margin and padding
Acquire full-width (in case the width is not defined)
Force a line break after them
A visual example looks like this:
Check out the snippet below for an extra visualization example
.block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: block;
}
.inline-block{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
}
.inline{
background: green;
width: 50px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
display: inline;
}
<div class="block">
block
</div>
<div class="block">
block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline-block">
inline block
</div>
<div class="inline">
inline
</div>
<div class="inline">
inline
</div>
Block - Element take complete width.All properties height , width, margin , padding work
Inline - element take height and width according to the content. Height , width , margin bottom and margin top do not work .Padding and left and right margin work. Example span and anchor.
Inline block - 1. Element don't take complete width, that is why it has *inline* in its name. All properties including height , width, margin top and margin bottom work on it. Which also work in block level element.That's why it has *block* in its name.